<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="css/snow.css">

    <style type="text/css">

        .box{width: 100%; height: 900px; background: #000;}

    </style>

</head>

<body>

<div class="box"></div>

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/snow.js"></script>

</body>

</html>

snow.css

/*雪花飘落*/

.snow-container {

    position: fixed;

    top:;

    left:;

    width: 100%;

    pointer-events: none;

    z-index:;

}

.snow-container .snow {

    position: absolute;

    background: #fff;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    -webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);

    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);

    background: url(../images/snow.png) no-repeat\9;

}

:root .snow-container .snow {

}

snow.js

var isSupportCss3 = (function(){

    var ret = /MSIE (\d+\.\d+)/.exec(navigator.userAgent);

    if( !ret || ret[1] > 9 ){

        return true;

    }

    return false;

})();

(function () {

  Function.prototype.bind = Function.prototype.bind || function(){

      var self = this,

        context = [].shift.call(arguments),

        args = [].slice.call(arguments);

      return function(){

        return self.apply(context, [].concat.call(args, [].slice.call(arguments)));

      }

    };

  function getRandom(min, max) {

    return min + Math.random()*(max-min);

  }

  function getWindowSize() {

    return {

      clientW: window.innerWidth || document.documentElement.clientWidth,

      clientH: window.innerHeight || document.documentElement.clientHeight

    }

  }

  var clientSize = getWindowSize();

  var body = document.body;

  function Snow(container, opts) {

    this.container = container;

    this.opts = opts;

    this.create();

  }

  Snow.prototype = {

    create: function () {

      this.el = document.createElement("div");

      this.el.className = 'snow';

      this.el.style["width"] = this.opts.snowWidth + "px";

      this.el.style["height"] = this.opts.snowHeight + "px";

      this.el.style["top"] = -this.opts.snowHeight + "px";

      this.el.style["-webkit-transition"] = "all " + this.opts.speed + "ms linear";

      this.el.style["transition"] = "all " + this.opts.speed + "ms linear";

      this.container.appendChild(this.el);

      this.fall();

    },

    fall: function () {

      var self = this;

      var left = getRandom(0, clientSize.clientW - this.opts.snowWidth);

      var destLeft = getRandom(-300, 300);

      var scale = getRandom(0.6, 1);

      this.el.style["left"] = left + "px";

      this.el.style["-ms-transform"] = "scale("+ scale +")";

      this.el.style["-webkit-transform"] = "scale("+ scale +")";

      this.el.style["transform"] = "scale("+ scale +")";

      body.offsetWidth;

      var transformStyle = "scale("+ scale +") translate3d("+ destLeft +"px,"+ (clientSize.clientH + this.opts.snowHeight)*2 +"px,0px)";

      this.el.style["-webkit-transform"] = transformStyle;

      this.el.style["transform"] = transformStyle;

      //当前页面失去焦点时，通过transitionend的方式移除this.el会有问题，因此通过这种方式移除

      $({y: -this.opts.snowHeight, left: left}).animate({

        y: (clientSize.clientH + this.opts.snowHeight)*(1/scale),

        left: left + destLeft

      }, {

        easing: 'linear',

        duration: this.opts.speed,

        step: function ( value, obj) {

          if( !isSupportCss3 ){

            if( obj.prop == 'y' ) {

              self.el.style.top = obj.now + "px";

            }

            if( obj.prop == 'left' ){

              self.el.style.left = obj.now + "px";

            }

          }

        },

        complete: function () {

          self.reset();

        }

      });

    },

    reset: function () {

      try {

        this.container.removeChild(this.el);

      } catch (e){

        console.error(e.message);

      }

    }

  };

  function SnowFall(opts){

    this.opts = $.extend({

      interval: 200,

      speed: 15000,

      snowWidth: 8,

      snowHeight: 8

    }, opts||{});

    this.timer = null;

    this.body = document.body;

    this.init();

  }

  SnowFall.prototype = {

    init: function () {

      this.createLayout();

      this.start();

    },

    start: function () {

      new Snow(this.container, this.opts);

      this.timer = setTimeout(function () {

        this.start();

      }.bind(this), this.opts.interval);

    },

    createLayout:function () {

      this.container = document.createElement("div");

      this.container.className = 'snow-container';

      this.body.appendChild(this.container);

    },

    destroy: function () {

      if( this.timer ) clearTimeout(this.timer);

      this.container.parentNode.removeChild(this.container);

    }

  };

  $(function () {

    $(window).on("resize", function () {

      clientSize = getWindowSize();

    });

  });

  new SnowFall();

})();

圣诞节雪花效果，pc端的更多相关文章

  1. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  2. Html5实现移动端、PC端 刮刮卡效果

    刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...

  3. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  4. CSS3及JS简单实现选项卡效果（适配手机端和pc端）

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  5. 移动端页面a input去除点击效果及pc端切换

    1 手机端页面a button input去除点击效果以及闪屏问题 添加: a, button, input { -webkit-tap-highlight-color: rgba(255, 0, 0 ...

  6. PC端触底效果反复触发的解决方案

    最近在做一个PC端的项目,要求是在滑动到页面的底部的时候就动态的加载下一页的数据,代码实现思路如下: 首先,我们需要知道浏览器中有三个高度,分别是屏幕高度(outerHeight),文档容器高度(in ...

  7. 页面PC端 / 移动端整屏纵向翻页，点击/触摸滑动效果功能代码非插件

    页面翻页,滑动功能示范代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. 关于pc端直播

    写这篇文章首先是想给自己一个总结.整理,还有就是给那些 没有特别明白直播是怎么回事的人一点 思路 最近公司想要做pc端直播,作为一个自认为很菜的前端实在是不知从何下手,所以只能用国人最爱的百度,搜索了 ...

  9. JavaScript判断移动端及pc端访问不同的网站

    JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...

随机推荐

  1. suse12安装详解

    1.部署步骤 1.1.启动安装程序 在启动页面上选择Installation,然后按Enter键,这将载入SUSE Linux服务器安装程序并以普通模式安装. 1.2.选择安装语言 Language和 ...

  2. DFS遍历拷贝所有子文件夹及目录列表 (Java版)

    如题 注意,文件夹是不能拷贝的, 需要mkdir的 文件选择合适的流进行拷贝 main测试方法 /** * 主测试类,默认将D:\\base01 下的复制到D:\\base02 * @param ar ...

  3. GT源码阅读

    昨天读了一点GT的代码,做个笔记. 参考阅读顺序:https://gt.qq.com/docs/a/UseGtWithBroadcast.txt 在上面的doc上面找到了对应的板块的代码. 1.采集本 ...

  4. machine learning (6)---how to choose features, polynomial regression

    how to choose features, polynomial regression:通过定义更适合我们的feature,选择更好的模型,使我们的曲线与数据更好的拟合(而不仅仅是一条直线) 可以 ...

  5. 用Visio画流程图

    一:基本流程图 主要用于创建流程图.顺序图.信息跟踪图.流程规划图和结构预测图,包含了形状.连接线和链接. 步骤: (1)打开Visio,单击"类别"->"流程图& ...

  6. 结构型模式(五) 外观模式（Facade）

    一.动机(Motivate) 在软件系统开发的过程中,当组件的客户(即外部接口,或客户程序)和组件中各种复杂的子系统有了过多的耦合,随着外部客户程序和各子系统的演化,这种过多的耦合面临很多变化的挑战. ...

  7. Tensorflow细节-P54-变量

    1.首先复习前面所学知识: (1)g = tf.Graph() (2)别忘了初始化时的initializer (3)with tf.name_scope("generate_constant ...

  8. NoSql数据库使用半年后在设计上面的一些心得 （转载）

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  9. C语言利用fgetc复制拷贝文件内容

    #include <stdio.h> #include <stdlib.h> //文件的内容复制 int main(int a,char *argv[]){ if(a!=3){ ...

  10. COGS 2687 讨厌整除的小明

    二次联通门 : COGS 2687 讨厌整除的小明 /* cogs 2687 讨厌整除的小明 打表出奇迹.. 考场时看了一下样例就感觉有非常鬼畜的做法.. 手搞几组数据做法就出来了... 2333 * ...