javascript实现下雪效果

来源：互联网发布：生意参谋数据分析2017 编辑：程序博客网时间：2024/05/17 22:27

设计一个页面，页面显示时具有雪花飘落的效果。

设计思路
- 定时改变雪花图像的样式属性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秒移动一次。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>雪花飘落</TITLE>
  4. <SCRIPT language="javascript">
  5. 
  45. </SCRIPT>
  46. </HEAD>
  48. <BODY>
  50. <SCRIPT language="javascript">
  51. 
  54. </SCRIPT>
  56. </BODY>
  58. </HTML>