使用 JavaScript 实现网页雪花飘落特效

追风的人

发布时间：2026-10-14 | 3人浏览过

原创

利用 JavaScript 在网页中实现雪花飘落特效，核心在于通过数组高效管理多个雪花对象，结合数学中的正弦函数模拟自然的横向摆动轨迹。相比传统的直接操作 DOM 属性，该方法利用 setTimeout 控制刷新频率，以数据驱动视图更新，显著提升动画流畅度与现代浏览器的兼容性。

核心原理与优化思路

要实现一个既美观又高效的雪花飘落效果，需要解决两个关键问题：一是如何让雪花呈现自然的非直线运动，二是如何确保页面中包含大量雪花时依然保持高性能。

首先，真实的雪花在下落过程中会受到气流影响，呈现出左右摆动的轨迹。我们可以利用三角函数中的 sin（正弦）值来模拟这种周期性摆动，使雪花的横向位移随时间呈波浪形变化。

其次，在性能方面，频繁地通过 ID 或标签名检索 DOM 元素会带来巨大的性能开销。本方案引入数组（Array）作为状态存储容器，将每个雪花的坐标、步长等数据独立保存。动画循环中直接读取和操作数组数据，最后统一更新 DOM，从而避免了冗余的 DOM 查询操作。

准备条件

在开始编码前，请确保准备好以下素材：

雪花图片：一张背景透明、适合做装饰的雪花 PNG 图片（例如命名为 snow.png），建议尺寸较小以减少渲染压力。
基础 HTML 结构：只需一个标准的 <body> 标签即可，脚本将自动在此容器内插入特效元素。

实现步骤

第1步：初始化变量与配置参数

目的：定义全局配置项及用于存储雪花状态的数组，确保作用域清晰且易于修改。

<SCRIPT LANGUAGE="JavaScript">
// 雪花图片路径
var snowsrc = "snow.png";
// 雪花总数
var no = 15; 

// 声明坐标与步长数组
var dx = new Array(); // 用于累积角度偏移
var xp = new Array(); // 记录当前横坐标
var yp = new Array(); // 记录当前纵坐标

var am = new Array(); // 左右摆动的振幅
var stx = new Array(); // x方向步长系数
var sty = new Array(); // y方向下落步长

// 窗口尺寸缓存
var clientWidth, clientHeight;
if (typeof(window.innerWidth) == 'number') {
    clientWidth = window.innerWidth;
    clientHeight = window.innerHeight;
} else {
    if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        clientWidth = document.documentElement.clientWidth;
        clientHeight = document.documentElement.clientHeight;
    } else {
        clientWidth = document.body.clientWidth;
        clientHeight = document.body.clientHeight;
    }
}
</SCRIPT>

第2步：动态创建并分布雪花 DOM 元素

目的：使用 document.createElement 动态生成 HTML 节点，利用绝对定位将雪花分散在屏幕顶部区域，并将引用存入数组供后续调用。

<SCRIPT LANGUAGE="JavaScript">
var snowFlakes = new Array();

for (i = 0; i < no; ++ i) { 
    // 初始化各物理属性
    dx[i] = 0;                          // 初始角度累加器
    xp[i] = Math.random() * (clientWidth - 50); // 随机横坐标起点
    yp[i] = Math.random() * clientHeight;       // 随机纵坐标起点
    am[i] = Math.random() * 20;           // 振幅
    stx[i] = 0.02 + Math.random() / 10;   // X轴步长
    sty[i] = 0.7 + Math.random();         // Y轴步长

    // 创建容器 Div
    var snowFlakeDiv = document.createElement('div');
    snowFlakeDiv.setAttribute('id', 'dot' + i);
    snowFlakeDiv.style.position = 'absolute';
    snowFlakeDiv.style.top = '15px';
    snowFlakeDiv.style.left = '15px';

    // 创建图片 Img
    var snowFlakeImg = document.createElement('img');
    snowFlakeImg.src = snowsrc;
    snowFlakeImg.style.width = '30px';
    snowFlakeImg.style.height = '30px';
    snowFlakeImg.style.border = '0';

    // 组装并添加到文档
    snowFlakeDiv.appendChild(snowFlakeImg);
    document.body.appendChild(snowFlakeDiv);
    snowFlakes[i] = snowFlakeDiv; // 保存引用
}
</SCRIPT>

第3步：编写动画逻辑与正弦摆动算法

目的：通过定时器不断计算新坐标，当雪花超出屏幕底部时重置其位置至顶部，形成无限循环的下雪效果。

<SCRIPT LANGUAGE="JavaScript">
function snow() {
    for (i = 0; i < no; ++ i) { 
        // Y轴下落
        yp[i] += sty[i];
        
        // 触底判断：如果超出可视区域，重置到顶部
        if (yp[i] > clientHeight - 50) {
            xp[i] = Math.random() * (clientWidth - am[i] - 30);
            yp[i] = 0;
        }

        // X轴摆动计算：基础位移 + 正弦波扰动
        dx[i] += stx[i];
        var snowFlakeDiv = snowFlakes[i];
        snowFlakeDiv.style.top = yp[i] + 'px';
        // 核心公式：left = 基础x + 振幅 * sin(角度)
        snowFlakeDiv.style.left = xp[i] + am[i] * Math.sin(dx[i]) + 'px';
    }
    
    // 每 10ms 刷新一次，约 100 FPS
    setTimeout("snow()", 10);
}

// 启动动画
snow();
</SCRIPT>