在开始敲代码之前,我需要弄清楚一下几个问题:
1、雪片存在的方式,我是用的<div>❄</div>
来表示一个雪片;
2、雪片的大小应该是在一个范围之内而且是随机的;
3、雪片的透明度也应该是有变化的,刚出现的雪片肯定会比飘落了一定时间的雪片的颜色深;
4、雪片出现的位置也应该随机,所以最后飘落的位置也应该随机;
5、最重要的是,因为雪片以div 的形式存在,所以当雪片在飘落到最下方的时候,这个div就应该消失,而不是一直存在于页面中,加重页面的负担。
以下是代码:
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/飘雪demo1.css" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script type="text/javascript" src="js/飘雪demo1.js" ></script>
<title>js小案例之飘雪效果</title>
</head>
<body>
<!--这里可以加一个音乐播放器,放你喜欢的歌-->
<!--<audio src="音乐链接" controls="controls" autoplay="autoplay"></audio>-->
</body>
</html>
css代码
*{
padding: 0;
margin: 0;
}
body{
overflow: hidden;//为了防止雪片与浏览器重合部分导致浏览器出现滚动条,所以要用overflow:hidden;
background-color: black;//我在这里用的黑色作为背景,你也可以根据自己的喜欢选择照片,代码像我在下方注释的那样
/*background-image: url(../img/7.jpg);
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
}*/
js代码,这里使用了jQuery
var JGtime = 10 + Math.random()*100;//产生雪片的时间间隔
var flake = $("<div>❄</div>").css("position","absolute");//雪片对象
$(function(){
setInterval(function(){//间隔JGtime产生一个雪片
var dWidth = $(document).width();//获取浏览器页面宽度
var dHeight = $(document).height();//获取浏览器页面高度
var startLeft = Math.random()*dWidth;//下落前左边的距离随机
var endLeft = Math.random()*dWidth;//下落后左边的距离随机
var flakeSize = 6 + Math.random()*50;//雪片大小
var startOpacity = 0.7+0.3*Math.random();//开始的透明度
var endOpacity = 0.4 + 0.3*Math.random();//落下的透明度
var durationTime = 4000+8000*Math.random();//时间随机。所以速度随机
flake.clone().appendTo($("body")).css({//复制一个雪片对象,添加到body,出现的位置
"left":startLeft,
"top":"-56px",
"font-size":flakeSize,//大小
"color":"white",//我的雪片是白色,如果你想颜色也随机,可以参考我上一篇(H5 +JavaScript生成验证码)里面的随机颜色的方法。
"opacity":startOpacity
}).animate({
"left":endLeft,
"opacity":endOpacity,
"top":dHeight
},durationTime,function(){
$(this).remove();//当雪片到最后,调用回调函数,让他消失,是为了保持页面流畅
});//经过一个随机的时间,变成上面的状态
},JGtime);
});