<!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. redis都有哪些数据类型？分别在哪些场景下使用比较合适？

    (1)string 这是最基本的类型了,没啥可说的,就是普通的set和get,做简单的kv缓存 (2)hash 这个是类似map的一种结构,这个一般就是可以将结构化的数据,比如一个对象(前提是这个对象 ...

  2. 【Java】《Java程序设计基础教程》第四章学习

    4.1 类的封装 封装指的是将东西包装在一起,然后以新的完整形式呈现.包含两个意义: 1). 把对象的全部属性和方法结合在一起,形成一个不可分割的独立单位(即对象). 2). 信息隐藏,即尽可能隐藏对 ...

  3. cookies localStorage和sessionStorage的区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  4. Oralce if ..elsif结构

    create or replace procedure sp_pro6(spNo number) is v_job emp.job%type; begin select e.job into v_jo ...

  5. getchar（）函数举例

    #include<stdio.h>void main(){ char ch; ch=getchar(); printf("%c",ch);}

  6. Node.js创建服务及实现静态资源托管/接口请求

    1.环境 采用12.13.x版本 2.创建server.js 文件内容如下: let http = require("http"); let fs = require(" ...

  7. Logparser

    http://www.microsoft.com/en-us/download/details.aspx?id=24659 Logparser 的用法 https://www.cnblogs.com/ ...

  8. nohup 后台执行

    nohup  默认是当前用户执行的,当当前用户退出会导致执行进程异常. 所以正确的 nohup 是指定 /bin/bash 进行执行. nohup /bin/bash/ /opt/script/s.s ...

  9. 洛谷 P2894 [USACO08FEB]酒店

    题目描述 用线段树维护三个值:区间最长空位长度,从左端点可以延伸的最长空位长度,从右端点可以延伸的最长空位长度. #include<complex> #include<cstdio& ...

  10. P4425 【[HNOI/AHOI2018]转盘】

    颂魔眼中的一眼题我大湖南竟无一人\(AC\) 首先我们考虑一个性质:我们肯定存在一种最优解,满足从某个点出发,一直往前走,不停下来. 证明:我们假设存在一种最优解,是在\(t_i\)的时候到达\(a\ ...