圣诞节雪花效果，pc端
<!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端的更多相关文章
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- Html5实现移动端、PC端 刮刮卡效果
刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...
- jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- CSS3及JS简单实现选项卡效果（适配手机端和pc端）
想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...
- 移动端页面a input去除点击效果及pc端切换
1 手机端页面a button input去除点击效果以及闪屏问题 添加: a, button, input { -webkit-tap-highlight-color: rgba(255, 0, 0 ...
- PC端触底效果反复触发的解决方案
最近在做一个PC端的项目,要求是在滑动到页面的底部的时候就动态的加载下一页的数据,代码实现思路如下: 首先,我们需要知道浏览器中有三个高度,分别是屏幕高度(outerHeight),文档容器高度(in ...
- 页面PC端 / 移动端整屏纵向翻页，点击/触摸滑动效果功能代码非插件
页面翻页,滑动功能示范代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 关于pc端直播
写这篇文章首先是想给自己一个总结.整理,还有就是给那些 没有特别明白直播是怎么回事的人一点 思路 最近公司想要做pc端直播,作为一个自认为很菜的前端实在是不知从何下手,所以只能用国人最爱的百度,搜索了 ...
- JavaScript判断移动端及pc端访问不同的网站
JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...
随机推荐
- Kotlin泛型与协变及逆变原理剖析
在上一次https://www.cnblogs.com/webor2006/p/11234941.html中学习了数据类[data class]相关的知识,这次会学习关于泛型相关的东东,其中有关于泛型 ...
- vue-（过滤器，钩子函数，路由）
1.局部过滤器 在当前组件内部使用过滤器,修饰一些数据 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } // ...
- 51nod 2381 个人所得税
牛牛已知每月的税前收入,他想知道在新个税下,税收后收入是多少?个税计算方法是这样的: 综合所得金额 - 新起征点5000元 = 应纳税所得额 其中 综合所得金额 就是税前收入,(你可以忽略五险一金,专 ...
- python_面向对象——动态创建类和isinstance和issubclass方法
# 给动态生产的类定义一个方法 def __init__(self,name): self.name = name print(self.name) def take(self,obj): print ...
- （java）selenium webdriver学习---实现简单的翻页，将页面内容的标题和标题链接取出
selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出: 该情况适合能能循环page=1~n,并且每个网页随着循环可以打开的情况, 注意一定是自己拼接的url可以 ...
- CString、char*l类型转换
环境:VS2010 1.CString to char* 第一种方法: 需头文件:atlconv.h CString host_string; //CString to char* USES_CO ...
- if语句：若边长小于等于0，则不进行计算；否则，计算正方形的面积
#include<stdio.h>void main(){ float a; printf("Input the value:"); scanf("%f&qu ...
- FailOver的机制
package util import ( "fmt" "hash/crc32" "math/rand" "sort" ...
- (转载) 从0开始搭建SQL Server AlwaysOn 第一篇（配置域控）
安装完之后别忘了还需要安装SSMS,这是坑爹的地方之二,干嘛不集成到SQL Server安装包里还要用户自己单独下载 下载地址:https://msdn.microsoft.com/en-us/lib ...
- PostgreSQL 输出 JSON 结果
PostGreSQL 从 9.2 开始增加对 JSON 的支持.9.5 已经支持多个 JSON 函数,见 http://www.postgres.cn/docs/9.5/functions-json. ...