雪花飘落设计

</pre><pre name="code" class="javascript">

大家好，我是执笔写流年殇，今天为大家介绍在页面中随机飘落雪片的设计，希望对大家有所帮助！

雪片下落会产生的随机数

1.雪片产生的时候，距离浏览器的左边(left)是随机的；
2.每个雪片下降的速度是随机的；
3.每个雪片的大小是随机的；
4.每个雪片的透明度是随机的；
5.雪片下落之后距离浏览器的左边是随机的
var minSize=5;     //获取雪片最小值
var maxSize=50;   //获取雪片最大值
var newOn=100; //获取雪片产生的时间，0.1秒产生一个雪片，单位是毫秒
var flakeColor="#fff";//获取雪片的颜色
var flake=$("<div></div>").css({"position":"absolute","top":"-50px"}).html("❉");
//var flake=$("<div></div>").css({"position":"absolute","top":"-50px"}).html("<img src='img/100.jpg' style='width:200px'>");
$(function(){
var documentHeight=$(document).height();  //获取浏览器的高度
var documentWidth=$(document).width(); //获取浏览器的宽度
setInterval(function(){
var startPositionLeft=Math.random()*documentWidth;  //获取雪片产生时距离浏览器左边的宽度(随机)
var startOpacity=0.7+Math.random()*0.3; //获取雪片的透明度(随机)
var endPositionTop=documentHeight;//获取雪片下降之后距离浏览器上边的高度；
var endPositionLeft=Math.random()*documentWidth; //获取雪片下降后距离浏览器左边的宽度(随机)
var durationFall=2000+Math.random()*3000;//获取雪片下降的速度(随机)
var flakeSize=minSize+Math.random()*maxSize;//获取雪片的大小(随机)
flake.clone().appendTo("body").css({    //把雪片复制一份添加到页面中，在设置它的样式和动画。
"left":startPositionLeft,
"opacity":startOpacity,
"font-size":flakeSize,
"color":flakeColor
}).animate({
"top":endPositionTop,
"left":endPositionLeft,
"opacity":0.5
},durationFall,function(){
$(this).remove();    //雪片下落后清除雪片
})
},newOn)

})

效果如下图：