用js代码和插件实现wordpress雪花飘落效果的四种方法

产生雪花每个雪花都是一个lt;igt;标签，里面放一个“*”来模拟雪花（google那个copy不下来，居然显示为空格，我了个太阳…），然后放到一个大容器叫snowBox里面，产生的个体push进iArray里面收集起来。雪花采用的是以snowBox为参照的绝对定位方式，top为0px，left就用Math.random()*window.screen.width，让雪花随机在屏幕宽度中产生。

用color来控制雪花的颜色深浅产生景深，范围在0～200之间
用fontSize来控制雪花的大小，范围在10px～15px之间
用time来控制雪花飘落的调用间隔，范围在40ms～50ms之间
用snowInterval来控制雪花产生的间隔，范围在500ms～1000ms之间

然后递归调用本身，不停产生雪花。

3、fallDown()

顾名思义就是让雪花飘落，飘落速度speed为2px，即每次纵向下降2px。这个时候做一个检测，如果雪花下降到固定高度下，即比父容器还高，那么就remove掉它，这样可以减轻浏览器的压力，要不然太多雪花会导致浏览器越走越慢，反正已经给overflow:hidden掉看不见了，眼不见为净。然后在纵向下降的同时调用个windBlow函数，让雪花下降的艺术些。

4、windBlow()

一个命名貌似风吹，其实真是风吹的效果（这话更废.哈哈.），利用一个Math.sin()来产生雪花在空中迂回飘荡的效果，这样雪花就不会单调的直线下降，而是蛇形飘落，控制好飘落的间隔，这样连续性比较好，看起来也舒服些。

function letItSnow(){
	var snowBox=document.getElementById("snowBox");
	var iArray=new Array();
	createSnow(snowBox,iArray);

}
function fallDown(temObj,iArray){
	var speed=2;
	var top=parseInt(temObj.style.top);
	if(topgt;510){//当到超过高度时候就删了它，减轻浏览器压力
		for(var i=0;ilt;iArray.length;i++){
			if(temObj==iArray[i]){
				iArray.splice(i,1);
				var snowBox=document.getElementById("snowBox");
				snowBox.removeChild(temObj);
				return false;
			}
		}
	}
	temObj.style.top=top+speed+"px";
	var wind=windBlow(temObj,top);
	temObj.style.left=parseInt(temObj.style.left)+wind*2+"px";
}
function windBlow(temObj,top){
	if(parseInt(Math.random())%2==1)
	return Math.sin(top/16);
	else return Math.cos(top/16);
}
function createSnow(snowBox,iArray){
	var temObj=document.createElement("i");
	var temText=document.createTextNode("*");
	temObj.appendChild(temText);
	temObj.style.left=parseInt(Math.random()*window.screen.width)+"px";
	temObj.style.top="0px";
	var temNum=parseInt(Math.random()*200);
	temObj.style.color="#"+temNum.toString(16)+temNum.toString(16)+temNum.toString(16);
	iArray.push(temObj);
	snowBox.appendChild(temObj);
	var temNum=0;
	while(temNumlt;10){
		temNum=parseInt(Math.random()*15);
	}
	temObj.style.fontSize=temNum+"px";

	var time=0;
	while(timelt;40){
		time=parseInt(Math.random()*50);
	}
	temObj.timer=setInterval(function(){
		fallDown(temObj,iArray);								
	},time);
	var snowInterval=0;
	while(snowIntervallt;500){
		snowInterval=parseInt(Math.random()*1000);
	}
	var createTimer=setTimeout(function(){
		createSnow(snowBox,iArray);	
		clearTimeout(createTimer);
	},snowInterval);
}

演示地址：http://demo.jb51.net/js/2014/snow/

好了，四个效果代码到此结束。希望能帮到有需要的朋友。如果有什么问题可以在下面留言。

（编辑：佛山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!