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包。。。