使用javascript实现雪花飘落的效果

网络编程 2024/11/15 佚名

3 2 1

看了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="/UploadFiles/2021-04-02/雪花.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>

以上就是全部代码了，效果还是挺棒的，具体的解释请看注释，这里就不多废话了，希望对大家能有所帮助。

javascript,雪花飘落

标签：

javascript,雪花飘落

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“使用javascript实现雪花飘落的效果”

使用javascript实现雪花飘落的效果

暂无“使用javascript实现雪花飘落的效果”评论...

使用javascript实现雪花飘落的效果

javascript,雪花飘落

scrollWidth,clientWidth,offsetWidth的区别

javascript数组输出的两种方式

评论“使用javascript实现雪花飘落的效果”

更新动态

友情链接