jquery 实现的一个 随机云标签网页背景

 几年前给本身的博客写的装X用的。。。哈哈哈。。。

$(function(){

    $('body').append('

<div class="_bg" style="position:absolute;top:0;left:0;width:100%;height: 100%;overflow:hidden;z-index:-1;"></div>

');

    var _bg = $("._bg");    //背景
    var _font_size = 300;   //最大字体
    var _fade = 0.5;        //内容透明度
    var _color = '';        //内容颜色 留空则随机
    //设置背景高度
    _bg.height($(window).height()); //$('body').height(),$(window).height(),500
    //给背景添加内容 在这里自定义内容
    var _content = '<i>A</i><i >B</i><i >V</i><i >T</i><i >D</i><i >F</i><i >G</i><i >W</i><i >S</i><i >Q</i>';
    _bg.html(_content);

    _bg.children().each(function(){     //随机背景内容的 大小 位置 旋转
        $(this).css({
        'position':'absolute',
        '-webkit-transform':"rotate("+Math.ceil(Math.random()*360)+"deg)",
        '-moz-transform':"rotate("+Math.ceil(Math.random()*360)+"deg)",
        '-ms-transform':"rotate("+Math.ceil(Math.random()*360)+"deg)",
        'font-size':Math.ceil(Math.random()*_font_size)+'px',
        'top':Math.ceil(Math.random()*_bg.height())+'px',
        'left':Math.ceil(Math.random()*_bg.width())+'px'
        });
        if(_color){
            $(this).css('color',_color);
        }else{
            $(this).css('color','#'+Math.ceil(Math.random()*1000000));
        }
        $(this).fadeTo(0,Math.random());
    });
    //设置总体透明度
    _bg.fadeTo(0,_fade);
});

 

因为使用了css3的旋转属性 ，一些低版本浏览器可能效果不太同样。。。

记得加载jquery包。。。