web | DKlogs -- 设计

JavaScript下雪效果【圣诞将至】

DK 于2009,12,23发表 | 没有评论 »

圣诞将至，整好皮肤上也能用得到，于是就做了一个下雪的效果。

难点主要就是集中在setTimeout函数上，因为setTimeout函数无法使用call和apply方法改变调用的对象所以这个地方比较值得注意。本效果中使用的是在window对象中注册两个数组，通过变通的方法实现。
window.objTimeoutFuncs = []; window.objTimeoutIds = []; function objTimeout(obj,func,time,id){ window.objTimeoutFuncs[id] = function(){ func.call(obj); } window.objTimeoutIds[id] = setTimeout('objTimeoutFuncs[\''+ id +'\']()',time); } function clearObjTimeout(id){ clearTimeout(window.objTimeoutIds[id]); }

在效果中根据雪花的大小调整雪花的透明度以及飘动的速度。由于IE下面图片透明度有问题会出现黑边所以就把IE的透明度设置去掉了，只保留了FireFox下的透明度变化效果。

显示代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" href="reset.css" type="text/css" /> <style> body{ background:#000; color:#fff;} #container{width:1002px; height:500px; background:#000; margin:0 auto; overflow:hidden; position:relative;} .snow{position:absolute;display:block;} </style> <script src="snow.js"></script> <script> //作者：DK //来源：www.dklogs.net //时间：2009年12月22日 //使用时请保留本信息 //将系统SetTimeout封装为可以在对象内部使用的timer函数 window.objTimeoutFuncs = []; window.objTimeoutIds = []; function objTimeout(obj,func,time,id){ owindow.objTimeoutFuncs[id] = function(){ ofunc.call(obj); o} owindow.objTimeoutIds[id] = setTimeout('objTimeoutFuncs[\''+ id +'\']()',time); } function clearObjTimeout(id){ oclearTimeout(window.objTimeoutIds[id]); } function Snow(scale){ o//容器的大小 othis.containerWidth=960; othis.containerHeight=500; o//雪花图片的宽度 othis.width=40; o//雪花图片的高度 othis.height=40; o//生成当前对象的ID othis.name="DKSnow"+Math.random()*1000; o//雪花对象的坐标值 othis.x=Math.random()*this.containerWidth; othis.y=Math.random()*this.containerHeight; o//雪花越大透明度越大 othis.alpha=1-scale; o//雪花透明度 othis.scale=scale; o//调用图片地址 othis.url="http://www.dklogs.net/snowFlower.png"; o//雪花飘动的时间间隔 othis.speed=60; o//雪花的飘动步长 othis.xStep=3; othis.yStep=this.scale*20-8; o//创建雪花的图片对象 othis.imgObj=document.createElement("img"); odocument.getElementById("container").appendChild(this.imgObj); othis.imgObj.name="snow"; o//设置雪花大小 othis.imgObj.width = this.width*this.scale; othis.imgObj.height = this.height*this.scale; o//对支持css3的浏览器根据远近改变透明度 othis.imgObj.style.opacity=this.alpha; o//给图片对象设置css样式类名 othis.imgObj.className="snow"; othis.show(); o} //显示雪花的函数 Snow.prototype.show=function(){ othis.imgObj.style.left=this.x+"px"; othis.imgObj.style.top=this.y+"px"; othis.imgObj.src=this.url; oobjTimeout(this,this.slideDown,this.speed,this.name); o} //雪花飘动函数 Snow.prototype.slideDown=function(){ othis.imgObj.style.left = parseInt(this.imgObj.style.left)+this.xStep*Math.random()+"px"; othis.imgObj.style.top = parseInt(this.imgObj.style.top)+this.yStep+"px"; oif(parseInt(this.imgObj.style.top)>this.containerHeight||parseInt(this.imgObj.style.left)>this.containerWidth) o{ othis.y=0; othis.show(); o} oelse oobjTimeout(this,this.slideDown,this.speed,this.name); o} function snowStart(){ ovar displayStatus=true; ofor(var i = 0; i<15; i++){ ovar snow = new Snow((Math.random()+1)/2); o} ovar snowHandler=document.getElementById("snowHandler"); osnowHandler.onclick=function(){ ovar container=document.getElementById("container"); ovar snows=document.getElementsByName("snow"); ovar elementNumber=snows.length; o//alert(elementNumber); oif(displayStatus) o{ odisplayStatus=false; ofor(var i=0;i<elementNumber;i++) o{ osnows[i].style.display="none"; o} o} oelse o{ odisplayStatus=true; ofor(var i=0;i<elementNumber;i++) o{ osnows[i].style.display="block"; o} o} o} } window.onload=function(){ osnowStart(); } </script> </head> <body> <div id="container"></div> <input id="snowHandler" type="button" value="切换下雪效果"> </body> </html>

具体代码中注释的很清楚，有喜欢的朋友请下载看源代码。

源码下载：圣诞将至，下雪效果

转载请注明原文出处《JavaScript下雪效果【圣诞将至】》如无特别声明，所有文章均遵守创作共用署名－非商业－禁止演绎 3.0协议。