【教程】JQuery制作飘雪效果

先上效果图

【教程】JQuery制作飘雪效果

测试环境，jquery-1.11.1，IE11

html部分，只引用jquery和自定义js，<body>标签中为空

自定义js代码

var flakeColor = "#fff";
var newOn=20;//间隔多长时间产生一个雪片
var flake = $("<div></div>").css({"position":"absolute"}).html("❄");
$(function () {
	var documentWidth = $(document).width();//获取浏览器的宽度
	var documentHeight = $(document).height();//获取浏览器的高度
	setInterval(function () {
	var startLeft = Math.random()*documentWidth;//雪片一开始的时候距离浏览器的left
	var endLeft = Math.random()*documentWidth;//雪片下落后距离浏览器的left
//	console.log(documentWidth,Math.random(),startLeft,endLeft)
	var flakeSize = 5 + Math.random()*50;//雪片随机的大小
	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",
		"font-size":flakeSize,
		"opacity":startOpacity
	}).animate({
		"left":endLeft,
		"top":documentHeight,
		"opacity":endOpacity
	},durationTime,function () {
		$(this).remove();
	})
		 
	},newOn);
});

css代码

body {
    background: #000;
    overflow: hidden;
}

【教程】JQuery制作飘雪效果

相关推荐