本文基于经典JavaScript网页特效实例，将图片飘浮效果改造为雪花飘落动画。针对原代码仅支持IE的问题，进行了全面重构：采用数组管理雪花对象以提升性能，使用createElement动态创建DOM元素，并优化了定位逻辑以兼容Chrome等现代浏览器。通过正弦函数控制横向摆动，结合setTimeout实现平滑动画，最终提供兼容IE8+及Chrome的完整代码方案。
背景与优化动机
参考《JavaScript网页特效实例大全》中图片飘落的示例后，决定动手实践学习。
将原示例中的图片替换为雪花素材，从而完成一个雪花飘落的视觉效果。
鉴于原示例中部分内容已过时，学习者应对相关代码进行修正与优化。
主要优化点包括：
1. 原代码对left和top属性的操作仅支持IE浏览器，这显然无法满足现代开发需求，必须确保对Chrome等主流浏览器的支持。 2. 原方案在控制图片下落过程中需反复检索DOM元素，效率较低；改为使用数组维护雪花对象，直接操作数组中的对象实例，可显著提升执行速度。 3. 向文档中添加元素的方式，由原生的HTML拼接改为通过JavaScript代码动态创建元素对象，符合现代前端开发规范。
实现思路与逻辑
具体实现思路如下：
1. 初始化阶段生成10个div元素，全部采用绝对定位（absolute），每个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>以上就是全部代码了，效果还是挺棒的，具体的解释请看注释，这里就不多废话了，希望对大家能有所帮助。