设计一个页面,页面显示时具有雪花飘落的效果。
- 设计思路
- 定时改变雪花图像的样式属性Top和Left值,使Top值每次增加一点,产生雪花落下的效果;而对于Left值,基本不变,但每次有很小幅度的增大或减少,产生雪花摆动效果,使用sin()函数可使这种摆动在方向上是连续的,从而产生雪花飘落的效果。
- 在函数snowStart(dot_number)中,通过执行document.write(snow_dot_html)为页面添加dot_number个雪花标记,并且每个雪花具有相同的id,使得脚本可以以snow_dot[i]形式访问每个雪花图像。
- 函数snowing()用于移动一次雪花点,以模拟雪花飘落效果。own_Y、own_offsetY、dot.own_am等不是<IMG>对象的标准HTML属性,但是通过赋值(如dot.own_Y = 0;)可以为对象分配自定义属性。自定义属性own_Y和own_offsetY控制雪花点与顶边的距离,而own_am、own_X、own_dx和own_dx_offset控制雪花点与左边的距离。pixelTop和pixelLeft是样式style对象以象素为单位的top和left值。语句“self.setTimeout("snowing()",10);”控制snowing()函数每0.01秒执行一次,即每个雪花点每0.01秒移动一次。
- <HTML>
- <HEAD>
- <TITLE>雪花飘落</TITLE>
- <SCRIPT language="javascript">
- <!--
- function snowStart(dot_number)
- {//启动雪花飘落过程(参数dot_number:雪花点数目)
- var i,snow_dot_html,dot_image;
- dot_image = "snow_dot.GIF";//雪花点图像
- snow_dot_html = '<IMG id="snow_dot" border="0" src="' + dot_image;
- snow_dot_html += '" style="position: absolute; left: -1; top: -1" width="35" height="36">';
- for(i=0;i<dot_number;i++)
- {//为当前文档添加多个表示雪花的IMG标记,并给出相同的id,以便以数组形式访问这些图像
- document.write(snow_dot_html);
- }
- snowing();
- }
- function snowing()
- {//移动雪花点的位置,以模拟雪花飘落
- var body_width,body_height,i,dot;
- body_width = document.body.clientWidth;
- body_height = document.body.clientHeight;
- for(i=0;i<snow_dot.length;i++)
- {//移动每个雪花
- dot = snow_dot[i];//某个雪花对象
- if(dot.style.pixelTop<0 || dot.style.pixelTop > (body_height - dot.height - 5))
- {//如果雪花点落在可视浏览区之外,则重新设置其初始位置
- dot.own_Y = 0; //Y坐标值
- dot.own_offsetY = 0.6 + Math.random();//Y轴方向的偏移量
- dot.own_am = Math.random()*20;//(左右)摆动幅度
- dot.own_X = dot.own_am + Math.random()*(body_width - dot.width-dot.own_am-20);
- dot.own_dx = 0;
- dot.own_dx_offset = 0.05 + Math.random()/10;
- }
- dot.own_dx += dot.own_dx_offset;
- dot.own_Y += dot.own_offsetY;
- dot.style.pixelTop = dot.own_Y;
- dot.style.pixelLeft = dot.own_X + dot.own_am * Math.sin(dot.own_dx);
- }
- self.setTimeout("snowing()",10);
- }
- //-->
- </SCRIPT>
- </HEAD>
- <BODY>
- <SCRIPT language="javascript">
- <!--
- snowStart(10);
- //-->
- </SCRIPT>
- </BODY>
- </HTML>