1.  (function () {
  2.      // 添加事件监听器
  3.      function addEvent(a, b, c) {
  4.          if (a.addEventListener) a.addEventListener(b, c, false);
  5.          else a.attachEvent && a.attachEvent("on" + b, c)
  6.      }
  7.      // 向window.onload添加执行函数
  8.      function addToOnLoad(a) {
  9.          if (typeof window.onload != "function") window.onload = a;
  10.          else {
  11.              var b = window.onload;
  12.              window.onload = function () {
  13.                  b();
  14.                  a()
  15.              }
  16.          }
  17.      }
  18.      // scroll top ,left
  19.      function getScrollDis() {
  20.          var scroll = {};
  21.          for (var type in {
  22.              Top: "",
  23.              Left: ""
  24.          }) {
  25.              var b = type == "Top" ? "Y" : "X";
  26.              if (typeof window["page" + b + "Offset"] != "undefined") scroll[type.toLowerCase()] = window["page" + b + "Offset"];
  27.              else {
  28.                  // <html>
  29.                  b = document.documentElement.clientHeight ? document.documentElement : document.body;
  30.                  scroll[type.toLowerCase()] = b["scroll" + type]
  31.              }
  32.          }
  33.          return scroll;
  34.      }
  35.  
  36.      // 获取浏览器窗口高度(不包括工具栏/滚动条)
  37.      function getWinHeight() {
  38.  
  39.          var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  40.          return height;
  41.      }
  42.  
  43.      //构造函数 ，模拟雪花类
  44.      function SnowDot(a) {
  45.          this.parent = document.body;
  46.          this.createEl(this.parent, a);
  47.          this.size = Math.random() * 5 + 5; // 随机设置雪花的大小
  48.          this.el.style.width = Math.round(this.size) + "px";
  49.          this.el.style.height = Math.round(this.size) + "px";
  50.          this.maxLeft = document.body.offsetWidth - this.size;
  51.          this.maxTop = document.body.offsetHeight - this.size;
  52.          this.left = Math.random() * this.maxLeft;
  53.          this.top = getScrollDis().top + 1;
  54.          this.angle = 1.4 + 0.2 * Math.random();
  55.          // PI/2 =1.57
  56.          this.minAngle = 1.4;
  57.          this.maxAngle = 1.6;
  58.          // 角度增量
  59.          this.angleDelta = 0.01 * Math.random();
  60.          this.speed = 2 + Math.random()
  61.      }
  62.      // 原型 对象实例所共享
  63.      SnowDot.prototype = {
  64.          createEl: function (a, b) {
  65.              this.el = document.createElement("img");
  66.              this.el.setAttribute("src", b + "snow" + Math.floor(Math.random() * 4) + ".gif");
  67.              this.el.style.position = "absolute";
  68.              this.el.style.display = "block";
  69.              this.el.style.zIndex = "99999";
  70.              this.parent.appendChild(this.el)
  71.          },
  72.          move: function () {
  73.              if (this.angle < this.minAngle || this.angle > this.maxAngle) this.angleDelta = -this.angleDelta;
  74.              this.angle += this.angleDelta;
  75.              // 利用正弦波 余弦波(注意波形图在 pi/2 附近的取值)
  76.              this.left += this.speed * Math.cos(this.angle * Math.PI);
  77.              this.top -= this.speed * Math.sin(this.angle * Math.PI);
  78.              if (this.left < 0) this.left = this.maxLeft;
  79.              else if (this.left > this.maxLeft) this.left = 0
  80.          },
  81.          draw: function () {
  82.              this.el.style.top = Math.round(this.top) + "px";
  83.              this.el.style.left = Math.round(this.left) + "px"
  84.          },
  85.          remove: function () {
  86.              this.parent.removeChild(this.el);
  87.              this.parent = this.el = null
  88.          }
  89.      }
  90.  
  91.      var j = false;
  92.      addToOnLoad(function () {
  93.          j = true
  94.      });
  95.  
  96.      //开启/关闭 标志
  97.      var f = true;
  98.  
  99.      // a : 雪花gif图片所在路径
  100.      // b : 雪花最大数目
  101.      window.createSnow = function (a, b) {
  102.          if (j) {
  103.              var c = [],
  104.              m = setInterval(function () {
  105.                  // &&前的为false则后边的语句不再执行
  106.                  f && b > c.length && Math.random() < b * 0.0025 && c.push(new SnowDot(a));
  107.                  !f && !c.length && clearInterval(m);
  108.                  for (var e = getScrollDis().top, n = getWinHeight(), d = c.length - 1; d >= 0; d--) {
  109.                      if (c[d]) {
  110.                          // 雪花超出指定高度
  111.                          if (c[d].top > 700 || c[d].top + c[d].size + 1 > e + n) {
  112.                              c[d].remove();
  113.                              c[d] = null;
  114.                              c.splice(d, 1) //移除数组索引d位置开始1个元素
  115.                              //alert(c[d].top)
  116.                          } else {
  117.                              c[d].move();
  118.                              c[d].draw()
  119.                          }
  120.                      }
  121.                  }
  122.              },
  123.              40);
  124.              // 窗口滚动时 雪花移动相应的距离
  125.              addEvent(window, "scroll",
  126.              function () {
  127.                  for (var e = c.length - 1; e >= 0; e--) c[e].draw()
  128.              })
  129.          } else addToOnLoad(function () {
  130.              createSnow(a, b)
  131.          })
  132.      };
  133.      window.removeSnow = function () {
  134.          f = false
  135.      };
  136.  
  137.  })();　　

源代码：snow.zip   页面内容节选自 阿狸-梦之城堡

javascript雪花效果 注释版的更多相关文章

  1. 编写Javascript类库（jQuery版

    编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...

  2. Html页面雪花效果的实现

    简单介绍 昨天修改了一下博客所用的模板,冬天来了,给自己的博客加点雪花,感觉更有意境. 百度找到了非常多的结果,最终还是选用了cfs.snow.js,很赞压缩之后只有1kb左右,而且不会影响页面使用, ...

  3. 《JavaScript实用效果整理》系列分享专栏

    整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 <JavaScript实用效果整理>已整理成PDF文档,点击可直 ...

  4. CAEmitterLayer实现雪花效果

    CAEmitterLayer 简介 在iOS5.0中,Apple引入了CAEmitterLayer层,CAEmitterLayer是一个高性能的粒子效果引擎,被用来创建实时粒子动画,如:烟雾,火,雨等 ...

  5. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  6. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  7. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  8. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  9. 仿360手机卫士界面效果android版源码

    仿360手机卫士界面效果android版,这个今天一大早在源码天堂的那个网站上看到了一个那个网站最新更新的一个源码,所以就分享给大学习一下吧,布局还挺不错的,而且也很简单的,我就不把我修改的那个分享出 ...

随机推荐

  1. YUV主要采样格式理解

    主要的采样格式有YCbCr 4:2:0.YCbCr 4:2:2.YCbCr 4:1:1和 YCbCr 4:4:4.其中YCbCr 4:1:1 比较常用,其含义为:每个点保存一个 8bit 的亮度值(也 ...

  2. C语言-删除重复字符

    //实现对一个字符串的删除重复的字符,并输出删除后的字符串,(如从”testroadeasy”中输出”tesroady”) Action(){    char *str="testroade ...

  3. react与jQuery对比,有空的时候再翻译一下

    参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-t ...

  4. 关于conversation generation的论文笔记

    对话模型此前的研究大致有三个方向:基于规则.基于信息检索.基于机器翻译.基于规则的对话系统,顾名思义,依赖于人们周密设计的规则,对话内容限制在特定领域下,实际应用如智能客服,智能场馆预定系统.基于信息 ...

  5. MPush开源消息推送系统：简洁、安全、支持集群

    引言由于之前自己团队需要一个消息推送系统来替换JPUSH,一直找了很久基本没有真正可用的开源系统所有就直接造了个轮子,造轮子的时候就奔着开源做打算的,只是后来创业项目失败一直没时间整理这一套代码,最近 ...

  6. Flex 4 不同主题下容器子元素的管理方法

    Flex 下,容器主要分两类:Spark容器, Halo容器. Spark容器 Halo容器 说明 numElements numChildern 容器的子元素数量. addElement( ) ad ...

  7. MySQL数据库获取多个汉字拼音的首字母函数

    需求简介:最近的一个项目,想实现如下图所示的显示效果.很明显,如果能够获取对应的汉字词组中每个汉字的拼音首字母就可以实现了,如果是固定的几组汉字,人为的拼一下就可以 了,不过项目中有多处功能需要这个效 ...

  8. 【MySQL】MySQL无基础学习和入门之二：MySQL的安装

    安装MySQL安装一般分为源码包编译安装.分发包.rpm包安装和yum安装,四种安装方式有一些区别,对应的适用场景也不一样. 源码包:源码包就是程序源代码包,其中包含程序代码文件,这些代码文件是文本型 ...

  9. 【IHttpHandler】HttpModule的认识

    HttpModule是向实现类提供模块初始化和处置事件.当一个HTTP请求到达HttpModule时,整个ASP.NET Framework系统还并没有对这个HTTP请求做任何处理,也就是说此时对于H ...

  10. oracle 强杀进程

    在ORACLE数据库当中,有时候会使用ALTER SYSTEM KILL SESSION 'sid,serial#'杀掉一个会话进程,但是使用这个SQL语句杀掉会话后,数据库并不会立即释放掉相关的资源 ...