JavaScript 实现下雪特效的示例代码

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下雪效果实现</title>
  <link rel="stylesheet" type="text/css" href="reset.css">
  <style type="text/css">
    body,html{
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script type="text/javascript">
    var snowflakes = {
      arr:[],// 数组盛放元素
      snowflake : [//雪花类型
            '❉',
            '❈',
            '*',
            '✲',
            '❀',
            '❃'
            ],
       snowflakeColor : [  //颜色库
            "red",
            "green",
            "#ccc123",
            "#345232",
            "#231111",
            "#ab2322"
            ],
       random : function (num){
        return Math.floor(Math.random()*num);// 获得一个num-1的整数
       },
       init : function (num){
        // 最多个数
        this.maxlength = num;
        // 边界
        this.maxWidth = (document.documentElement.clientWidth || document.body.clientWidth) + 20;
        // 边界
        this.maxHeight = (document.documentElement.clientHeight || document.body.clientHeight) + 20;
        this.create();
        this.move();
       },
       // 创建
       create : function (){
        var that = this;
        setInterval(function (){
          // 当数组中的数量，比最大数量要小的时候 开始创建
          if( that.arr.length < that.maxlength){
            var d = document.createElement("div");
            // 内容和 颜色是随机的 颜色和文字库里面的
            d.innerHTML = that.snowflake[that.random(that.snowflake.length)];
            d.style.color = that.snowflakeColor[that.random(that.snowflakeColor.length)];
            d.style.position = "absolute";
            // 位置是随机的 top(0- -99) left (0 - that.maxWidth*2/3-1)
            d.style.left = that.random(that.maxWidth*2/3) + "px";
            d.style.top = -that.random(100) + "px";
            // 速度
            d.vx = 2+that.random(10);
            d.vy = 3+that.random(10);
            // 数组添加元素, body 添加元素
            document.body.appendChild(d);
            that.arr.push(d)
          }
        },20)
       },
       // 运动
       move : function (){
        var that = this;
        var arr = that.arr;
        setInterval(function (){
          // 循环数组中的每一个元素
          for(var i = 0 ; i < arr.length ; i ++ ){
            // 替换位置
            arr[i].style.left = arr[i].offsetLeft + arr[i].vx + "px";
            arr[i].style.top = arr[i].offsetTop + arr[i].vy + 'px';
            // 判断边界 删除元素
            if (arr[i].offsetTop >= that.maxHeight || arr[i].offsetLeft >= that.maxWidth) {
              document.body.removeChild(arr[i]);
              arr.splice(i,1);
            }
          }
        },30)
       }
    }
    window.onload = function (){
      snowflakes.init(100);
    }
  </script>
</body>
</html>

效果图

以上就是JavaScript 实现下雪特效的示例代码的详细内容，更多关于JavaScript 实现下雪特效的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 基于nodejs的雪碧图制作工具的示例代码

    前颜(yan) 雪碧图(CSS sprite ),就是把很多小图标合并为一张图片. 在Web开发中,使用雪碧图是优化Web性能的一种方法. 比如你可能遇到过这样的一种场景:在你的页面中,使用到了很多的小图标,然后你的每个小图标都是通过 <img src='logo.png'>来引用的. 通过这种方式虽然比较方便,但是存在的一个缺点就是性能问题,即浏览器在解析每个小图标时,都要发起一次http或(https)请求,而这个小图标本身却很小,可能只有十几k甚至几k,那么为每个小图标单独发起http请

  • JS和JQuery实现雪花飘落效果

    JS和JQuery实现雪花飘落效果

    很多朋友在做特效网页的时候需要用到雪花飘落的效果,我们这里给大家整理了分别用JS还有JQuery两种代码实现这个效果的方式. 我们先来看一下需要实现的雪花效果: 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 解释 setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行.它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器. var timerId = setT

  • JS实现模拟风力的雪花飘落效果

    本文实例讲述了JS实现模拟风力的雪花飘落效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 下雪了 javascript实现雪花飞舞

    本文实例为大家分享了雪花飞舞效果javascript实现,供大家参考,具体内容如下 原理: 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 效果预览:http://wjf444128852.github.io/demo02/snow/index.html HTML代码: <!DOCTYPE html> <html lang="en&qu

  • js特效,页面下雪的小例子

    复制代码 代码如下: if (arr[i]){                 var ofs=$(this).offset();                var x=parseInt(ofs.left);                var y =parseInt(ofs.top);                var vy=parseInt($(this).attr("vy"));                x +=wind;                vy *=

  • JS+Canvas 实现下雨下雪效果

    JS+Canvas 实现下雨下雪效果

    最近做了一个项目,其中有需求要实现下雨小雪的动画特效,所以在此做了个drop组件,来展现这种canvas常见的下落物体效果.在没给大家介绍正文之前,先给大家展示下效果图: 展示效果图: 下雨 下雪 看起来效果还是不错的,相对于使用创建dom元素来制作多物体位移动画, 使用canvas会更加容易快捷,以及性能会更好 调用代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

  • JS实现的雪花飘落特效示例

    JS实现的雪花飘落特效示例

    本文实例讲述了JS实现的雪花飘落特效.分享给大家供大家参考,具体如下: 首先我们要创建一个HTML文件,将其命名为index.html <!DOCTYPE html> <html> <head> <title> Canvas - 雪花特效 </title> <meta charset="utf-8"> <style> *{ margin:0px; padding:0px; } .myCanvas{ fl

  • javascript实现下雪效果【实例代码】

    原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飞舞</title> <lin

  • 原生js+canvas实现下雪效果

    本文实例为大家分享了js+canvas实现下雪效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas下雪效果(原生js)</title> <style> * { margin: 0; padding: 0 } html, body { width: 100%;

  • 原生JS实现的雪花飘落动画效果

    原生JS实现的雪花飘落动画效果

    本文实例讲述了原生JS实现的雪花飘落动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>www.jb51.net JS下雪动画</title> &

随机推荐