用javascript实现雪花飘落的效果
把图片换成雪花,完成雪花的效果。
有些已经过时了,所以把它们除掉。
包括 uff1a
1。左侧和顶部支持的操作只有IE浏览器,必须由Chrome支持。
2。要控制画面的落下过程也要检索元素,不好,即变成数组维护,直接操作数组,以维持对象,而不是更快。
三.将元素直接添加到通过js代码创建元素对象的方式。
实现这个想法:
1。初始化生成10部都是绝对定位。在每个div中放置一张雪花图片,并设置宽度的高度,并保存在数组中,以便可以直接操作紧接着雪的功能。
2。初始化的横坐标与纵坐标的每个div,总是给人一种雪花开始。
三.每个雪花的初始化,我们有一个纵向下降步骤和一个水平摆动步骤,使每个雪花将下降,并以不同的速度摆动。
4。做雪函数,每10秒钟调整一个函数的功能,是控制每个雪花在纵向上的下落,自己一步一步,通过正弦函数的横向摆动来计算一个正弦值乘以振幅,所以雪花的下降是按照正弦法进行的。
这些图片可以在网上找到。
下面的代码是IE8 +兼容,铬。
复制代码代码如下所示:
横轴轨迹过程中的图像是以点为中心的正弦曲线。
/ /使用setTimeout函数实现动画功能
/图片
无功snowsrc =雪花。png
雪数
var = 10;
/ /声明一个变量,XP说的横纵坐标> YP
VaR的DX,XP,YP;
声明说,我 / /变量,摆动幅度,STX偏置的横坐标,纵坐标步>麦粒肿
VaR是、STX、麦粒肿;
{
获取当前窗口宽度
clientwidth = document.body.clientwidth;
获取当前窗口高度
document.body.clientheight自己=;
}
新数组();
新数组();
VaR YP =新的数组();
var =新数组();
VaR STX =新的数组();
VaR的猪圈=新的数组();
雪花=新阵列();
对于(i = 0;i <否;+ i){
0;
的i /初始水平坐标值
XP {我} = Math.random()*(clientwidth-50);
YP {我} = Math.random(*自己); / /初始坐标我画的价值
我是{ } = Math.random(×20); / /摇摆我图像幅度
STX {我} = 0.02 + Math.random( / / / 10);我画X方向步
麦粒肿{我} = 0.7 + Math.random(我); / /图片Y方向步
生成包含div图片的雪花,并设置其绝对坐标
无功snowflakediv = document.createelement('div);
snowflakediv.setattribute('id','dot +我);
snowflakediv.style.position =绝对的;
snowflakediv.style.top = 15;
snowflakediv.style.left = 15;
生成一个雪/图片对象,设置宽度和高度,并加入div
无功snowflakeimg = document.createelement('img);
snowflakeimg.setattribute('src ',snowsrc);
snowflakeimg.style.width = 30;
snowflakeimg.style.height = 30;
Div将被添加到文档,并通过数组。
snowflakediv.appendchild(snowflakeimg);
document.body.appendchild(snowflakediv);
SnowFlakes{i} = snowFlakeDiv;
}
函数雪(){
对于(i = 0;i <否;+ i){
带步的i//纵图
YP {我} =猪圈{我};
如果超过新 /屏幕下沿,复位的图片信息,包括横纵坐标,X方向和Y方向上的一步一步
如果(YP {我} > clientheight-50){
横坐标 /重新分配图
XP {我} = Math.random()*(clientwidth是{我} - 30);
纵坐标分配。
YP {我} = 0;
}
DX {我} = STX {我}; / / DX加变步长
直接操作数组对应于雪分区。
无功snowflakediv =雪花{我};
纵坐标/更新图片
snowflakediv.style.top = YP {我};
横坐标 /更新图片
snowflakediv.style.left = XP {我}是{我} + Math.sin(DX {我});
}
设置刷新周期时间/动画
setTimeout(雪()
}
/ /电话snowie()函数
中岛幸惠();
以上是全部代码,效果很好,具体说明请看注释,这里没有太大的浪费,希望对你有所帮助。