使用javascript实现雪花飘落的效果
网络编程 2021-07-04 21:47www.168986.cn编程入门
本文主要介绍了使用javascript实现雪花飘落的特效,虽然网上有很多,不过都是比较陈旧了,兼容性不是太好,于是动手写一个,把思路和实现代码都分享给大家。
看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下。
就把图片改成雪花图,完成一个雪花飘下的效果。
并且,其中有些内容比较陈旧了,那么就学者改掉吧。
包括:
1.对left和的操作仅支持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. = 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. = yp[i];
//更新图片的横坐标
snowFlakeDiv.style.left = xp[i] + am[i]*Math.sin(dx[i]);
}
//设定动画刷新的时间周期
setTimeout("snow()", 10);
}
//调用snowIE()函数
snow();
</script>
</BODY>
以上就是全部代码了,效果还是挺棒的,具体的解释请看注释,这里就不多废话了,希望对大家能有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程