<!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. 实用mysql数据库命令

    连接:mysql -h主机地址 -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样)断开:exit (回车) 创建授权:grant select on 数据库.* to 用户名@登 ...

  2. Maven安装及其IDEA的配置

    相关内容网上很多,本文转载自csdn博主 击中我,https://blog.csdn.net/qq_36267611/article/details/85274885,内文略有修改. 一.下载安装前往 ...

  3. CF553E Kyoya and Train

    Kyoya and Train 一个有\(n\)个节点\(m\)条边的有向图,每条边连接了\(a_i\)和\(b_i\),花费为\(c_i\). 每次经过某一条边就要花费该边的\(c_i\). 第\( ...

  4. Stone Game II

    Description There is a stone game.At the beginning of the game the player picks n piles of stones in ...

  5. 流媒体知识 wiki

    媒体业务是网络的主要业务之间.尤其移动互联网业务的兴起,在运营商和应用开发商中,媒体业务份量极重,其中媒体的编解码服务涉及需求分析.应用开发.释放license收费等等.最近因为项目的关系,需要理清媒 ...

  6. asp.net之大文件断点续传

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...

  7. 在运维中的shell经验总结

    来自良许Linux公众号 编写 脚本开头部分应有脚本功能说明.参数使用说明.作者姓名.创建/修改日期.版本信息,格式为: 脚本编写时,注意格式对齐,如所有的循环或者判断语句前后的语句进行对齐,以及ca ...

  8. 【一起来烧脑】读懂Promise知识体系

    知识体系 Promise基础语法,如何处理错误,简单介绍异步函数 内容 错误处理的两种方式: reject('错误信息').then(null, message => {}) throw new ...

  9. PHP隐藏入口脚本文件index.php

    一.nginx下 隐藏入口文件时,配置nginx 首先得开启nginx pathinfo模式: location ~ \.php { #去掉$ root E:/phpStudy/WWW/tp/publ ...

  10. git添加公钥后报错sign_and_send_pubkey: signing failed: agent refused operation的解决办法

    在服务器添加完公钥后报错 sign_and_send_pubkey: signing failed: agent refused operation 这个时候我们只要执行下 eval "$( ...