码迷,mamicode.com
首页 > Web开发 > 详细

web前端学习笔记---实现雪花飘落的效果

时间:2015-01-12 20:48:25      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:

看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下。

就把图片改成雪花图,完成一个雪花飘下的效果。

并且,其中有些内容比较陈旧了,那么就学者改掉吧。

包括:

1.对left和top的操作仅支持IE浏览器,这咋行,必须得支持chrome。

2.控制图片下落的过程还要去检索element,不好吧,那就改成数组维持,直接操作数组中维持的对象,启不更快。

3.向文档中添加元素直接改成通过JS代码创建元素对象的方式。

 

实现思路:

1.初始化生成10个div,全都采用绝对定位,每个div中放一个雪花图片,设置好宽高,并保存在数组中,便于后面下雪的函数直接操作。

2.初始化每个div的横坐标和纵坐标,总要给雪花一个下落的起始位置吧。

3.初始化为每个雪花都设一个纵向的下落步长,一个横向的摆动步长,这样每个雪花都会以不同的速度下落和摆动。

4.做一个下雪的函数,每10秒调一下该函数,每调一次该函数,就是控制每个雪花在纵向下落一个自身的步长,横向的摆动通过正弦函数算出一个正弦值后乘以幅度,这样雪花下落就是按照正弦波形的方式进行。

 

图片可以网上随便找。

以下代码兼容IE8+,Chrome。

<BODY>
  <SCRIPT LANGUAGE="JavaScript">
    //图片的过程中,横坐标的轨迹是以一点为中心的正弦曲线
    //利用了setTimeout函数完成了动画的功能

//图片 var snowsrc="雪花.png" //雪花个数 var no = 10; //声明变量,xp表示横坐标,yp表示纵坐标> var dx, xp, yp; //声明变量,am表示左右摆动的幅度,stx表示横坐标的偏移步长,sty表示纵坐标的步长> var am, stx, sty; { //获取当前窗口的宽度 clientWidth = document.body.clientWidth; //获取当前窗口的高度 clientHeight = document.body.clientHeight; } var dx = new Array(); var xp = new Array(); var yp = new Array(); var am = new Array(); var stx = new Array(); var sty = new Array(); var snowFlakes = new Array(); for (i = 0; i < no; ++ i) { dx[i] = 0; //第i个图片的横坐标初始值 xp[i] = Math.random()*(clientWidth-50); yp[i] = Math.random()*clientHeight;//第i个图片的纵坐标初始值 am[i] = Math.random()*20; //第i个图片的左右摆动的幅度 stx[i] = 0.02 + Math.random()/10; //第i个图片x方向的步长 sty[i] = 0.7 + Math.random(); //第i个图片y方向的步长 //生成一个容纳雪花图片的div,并设置其绝对坐标 var snowFlakeDiv = document.createElement(‘div‘); snowFlakeDiv.setAttribute(‘id‘, ‘dot‘+ i); snowFlakeDiv.style.position = ‘absolute‘; snowFlakeDiv.style.top = 15; snowFlakeDiv.style.left = 15; //生成一个雪花图片对象,设置宽高,并加入div var snowFlakeImg = document.createElement(‘img‘); snowFlakeImg.setAttribute(‘src‘, snowsrc); snowFlakeImg.style.width = 30; snowFlakeImg.style.height = 30; //将雪花div加入到document中,并通过数组保存 snowFlakeDiv.appendChild(snowFlakeImg); document.body.appendChild(snowFlakeDiv); snowFlakes[i] = snowFlakeDiv; } function snow() { for (i = 0; i < no; ++ i) { //第i个图片的纵坐标加上步长 yp[i] += sty[i]; //如果新坐标超过了屏幕下沿,重置该图片的信息,包括横坐标、纵坐标以及x方向的步长和y方向的步长 if (yp[i] > clientHeight-50) { //重新赋值图片的横坐标 xp[i] = Math.random()*(clientWidth-am[i]-30); //重新赋值图片的纵坐标 yp[i] = 0; } dx[i] += stx[i];//dx变量加上一个步长 //直接操作数组中对应的雪花div var snowFlakeDiv = snowFlakes[i]; //更新图片的纵坐标 snowFlakeDiv.style.top = yp[i]; //更新图片的横坐标 snowFlakeDiv.style.left = xp[i] + am[i]*Math.sin(dx[i]); } //设定动画刷新的时间周期 setTimeout("snow()", 10); } //调用snowIE()函数 snow(); </script> </BODY>

 

web前端学习笔记---实现雪花飘落的效果

标签:

原文地址:http://www.cnblogs.com/kongxianghai/p/4219057.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!