冬季,关于雪的东西就多了起来,最近写代码经常会用到雪花飘飘的效果,今天整理了出来。
废话不多说,直接上代码
var flakeColor = "#fff"; //雪花的颜色
var newOn = 500; //间隔多长时间产生一个雪花
var flake = $("<div></div>").css("position", "absolute").html('<img src= "image/snow.png">');//雪花图片
$(function() {
setInterval(function() {
var documentWidth = $(document).width(); //获取浏览器的宽度
var documentHeight = $(document).height();
var startLeft = Math.random() * documentWidth; //雪花开始时距离浏览器的left
var endLeft = Math.random() * documentWidth; //雪花下落后距离浏览器的left
var flakeSize = Math.random() * 5; //雪花随机的大小
var startOpacity = 0.7 + 0.3 * Math.random() //雪花一开始的透明度
var endOpacity = 0.4 + 0.3 * Math.random() //雪花下落后的透明度
var durationTime = 4000 + 6000 * Math.random() //雪花下落的时间
flake.clone().appendTo($("body")).css({
"left": startLeft,
"color": flakeColor,
"top": "-55px",
"width": flakeSize + "%",
"opacity": startOpacity
}).animate({
"left": endLeft,
"top": documentHeight,
"opacity": startOpacity
}, durationTime, function() {
$(this).remove();
});
}, newOn);
})
提示:
- 基于jquery,不要忘记引入哦~
- css的一些代码
body{
background: #000;
overflow: hidden;
}
img{
display: block;
width: 100%;
}