<!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. 【转】An introduction to using and visualizing channels in Go

    An introduction to using and visualizing channels in Go 原文:https://www.sohamkamani.com/blog/2017/08/ ...

  2. 使用lua脚本在nginx上进行灰度流量转发

    参考资料 idea+openresty+lua开发环境搭建 OpenResty最佳实践 灰度发布基于cookie分流 从请求中获取值 -- 从请求中获取请求头为 Sec-WebSocket-Proto ...

  3. ps -ef、ps aux(查看进程占用内存大小)

    Linux下ps -ef和ps aux的区别及格式详解 Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区别呢?两者没太大差别,讨论这个问题,要追溯到Uni ...

  4. learning java AWT Pannel

    import java.awt.*; public class PanelTest { public static void main(String[] args) { var f = new Fra ...

  5. Linux工具[转]

    ref: https://github.com/linw7/Skill-Tree/blob/master/Linux%E5%B7%A5%E5%85%B7.md Linux工具 Linux下还是有很多超 ...

  6. GSS1 A - Can you answer these queries I

    //题意:询问一段区间的最大子序列的值. //做法:维护四个值:包含当前区间左端点的最大子区间LM,包含当前区间右端点的最大子区间RM.当前区间的最大子区间M, 当前区间的区间和S //tree[ro ...

  7. vimset

    vim ~./vimrc  vim /etc/vim/vimrc set nocompatible                 "去掉有关vi一致性模式,避免以前版本的bug和局限 se ...

  8. mac 安装cmake

    下载:https://cmake.org/download/ 下载完成后,双击安装 安装完成后,打开命令行,运行 bogon:~ macname$ sudo "/Applications/C ...

  9. MySQL事务(脏读、不可重复读、幻读)

    1. 什么是事务? 是数据库操作的最小工作单元,是作为单个逻辑工作单元执行的一系列操作:这些操作作为一个整体一起向系统提交,要么都执行.要么都不执行:事务是一组不可再分割的操作集合(工作逻辑单元): ...

  10. 批量更新表注释 mysql

    -- 生成更新语句 SELECT CONCAT( 'ALTER TABLE ', T2.table_name, ' COMMENT ''', T1.TABLE_COMMENT, ''';' ) sql ...