jQuary實現背景飄雪效果

css樣式：

body{

    padding: 0;

    margin: 0;

    overflow: hidden;

    background: #000;

}

JS代碼：

var flackColor = "#fff"; //雪片顏色

var newOne = 10;//間隔10毫秒

var flake = $("<div></div>").html("❄").css("position","absolute");

$(function(){

setInterval(function(){

var dWidth =$(document).width();//獲取頁面寬度

var dHeight = $(document).height();//獲取頁面高度

var startLeft =dWidth*Math.random();//雪片隨機出現位置

var endLeft =dWidth*Math.random();//雪片隨機結束位置

var flakeSize=5+50*Math.random();//雪片大小

var durationTime=4000+7000*Math.random();

var startOpacity=0.7+0.3*Math.random();//出現時雪片透明度

var endOpacity=0.4+0.3*Math.random();//消失時圖片透明度

flake.clone().appendTo($("body")).css({

"left":startLeft,

"top":"-55px",

"opacity":startOpacity,

"font-size":flakeSize,

"color":flackColor,

}).animate({

"left":endLeft,

"top":dHeight,

"opacity":endOpacity

},durationTime,function(){

$(this).remove();

})

},newOne);

})