HTML页面下雪特效
1. [代码][HTML]代码
<a href="javascript:void(function(){var d = document,a = 'setAttribute',s = d.createElement('script');s[a]('type','text/javascript');s[a]('src','http://www.veryued.org/wp-content/themes/google_snow.js');d.head.appendChild(s);})();">下雪</a>
2. [代码][JavaScript]代码
(function(){
if(window.zythumsgooglesnowloaded) return false;
function oneCircle(ct,cw,ch,pw,_pw,ph,_ph){
var rw = (_pw+(pw-_pw)*Math.random())*cw,
rh = (_ph+(ph-_ph)*Math.random())*ch,
ra = 0.5*Math.random(),
rr = 50+cw/10*Math.random();
ct.globalCompositeOperation = 'source-over';
var g = ct.createRadialGradient(rw, rh, 0, rw, rh, rr);
g.addColorStop(0,'rgba(240,240,240,'+ra+')');
g.addColorStop(1,'rgba(240,240,240,0)');
ct.fillStyle = g;
ct.fillRect(0, 0, cw, ch);
ct.fill();
}
function draw(ct){
var pointerArr = [];
this.dPointer = function(x,y){
pointerArr.push({x:x,y:y});
_draw(0);
}
this.dLine = function(x,y){
pointerArr.push({x:x,y:y});
_draw(0);
}
this.stop = function(){
pointerArr.push(false);
}
var _draw = function(c){
ct.globalCompositeOperation = 'destination-out';
ct.lineWidth = 60;
ct.lineCap = ct.lineJoin = "round";
ct.beginPath();
ct.moveTo(pointerArr[c].x,pointerArr[c].y);
while(pointerArr[++c]){
ct.lineTo(pointerArr[c].x,pointerArr[c].y);
}
ct.stroke();
ct.closePath();
if(pointerArr[c] == undefined) return false;
_draw(++c);
}
}
var d = document.createElement('div'),
ca = document.createElement('canvas'),
w = 0;h = 0;
document.body.appendChild(d);
d.appendChild(ca);
d.style.cssText += ';position:fixed;top:0;left:0;bottom:0;right:0;z-index:100001;';
w = d.offsetWidth;h = d.offsetHeight;
ca.setAttribute('width',w);
ca.setAttribute('height',h);
ca.onselectstart = function(){return false};
ca.style.cursor = 'pointer';
ct = ca.getContext('2d');
//forgs
forgFinished = false;
setTimeout(function(){
(function(){
var loopContent = 100,
loop = function(){
oneCircle(ct,w,h,1,0,0.05,-0.1);
if(loopContent--) setTimeout(loop,50);
}
loop();
})();
},2000)
setTimeout(function(){
(function(){
var loopContent = 80,
loop = function(){
oneCircle(ct,w,h,1.1,0.95,1,0);
if(loopContent--) setTimeout(loop,50);
}
loop();
})();
(function(){
var loopContent = 80,
loop = function(){
oneCircle(ct,w,h,0.05,-0.1,1,0);
if(loopContent--) setTimeout(loop,50);
}
loop();
})();
(function(){
var loopContent = 80,
loop = function(){
oneCircle(ct,w,h,1,0,1.1,0.95);
if(loopContent--) setTimeout(loop,50);
}
loop();
})();
},4000);
setTimeout(function(){
(function(){
var loopContent = 50,
loop = function(){
oneCircle(ct,w,h,1,0,0.3,0.05);
if(loopContent--) setTimeout(loop,40);
}
loop();
})();
(function(){
var loopContent = 50,
loop = function(){
oneCircle(ct,w,h,0.95,0.7,1,0);
if(loopContent--) setTimeout(loop,40);
}
loop();
})();
(function(){
var loopContent = 50,
loop = function(){
oneCircle(ct,w,h,0.3,0.05,1,0);
if(loopContent--) setTimeout(loop,40);
}
loop();
})();
(function(){
var loopContent = 50,
loop = function(){
oneCircle(ct,w,h,1,0,0.95,0.7);
if(loopContent--) setTimeout(loop,40);
}
loop();
})();
},6000);
setTimeout(function(){
(function(){
var loopContent = 50,
loop = function(){
oneCircle(ct,w,h,1,0,1,0);
if(loopContent--) setTimeout(loop,20);
}
loop();
})();
forgFinished = true;
//ct.save();
},7000);
//draw;
var dr = new draw(ct);
var moveFlag = false;
document.addEventListener('mousedown',function(e){
if(forgFinished){
dr.dPointer(e.clientX,e.clientY);
moveFlag = true;
}
},false);
document.addEventListener('mousemove',function(e){
if(moveFlag) dr.dLine(e.clientX,e.clientY)
},false);http://www.huiyi8.com/clxgt/
document.addEventListener('mouseup',function(e){
dr.stop(e.clientX,e.clientY)
moveFlag = false;
},false);窗帘效果图
document.addEventListener('touchstart',function(e){
dr.dPointer(e.clientX,e.clientY);
moveFlag = true;
},false);
document.addEventListener('touchmove',function(e){
if(moveFlag) dr.dLine(e.clientX,e.clientY)
},false);
document.addEventListener('touchend',function(e){
dr.stop(e.clientX,e.clientY)
moveFlag = false;
},false);
//snow
var sd = document.createElement('div');
document.body.appendChild(sd);
sd.style.cssText += ';position:fixed;top:0;left:0;right:0;bottom:0;z-index:100000;overflow:hidden;';
var ss = [];
var limit = 0;
var stime = setInterval(function(){
if(limit++ == 5){
limit = 0;
var ns = document.createElement('div');
ns.innerHTML = '\u2745';
ns.style.cssText += ';position:absolute;top:-2px;color:#333;opacity:0.8;';
//-webkit-transition:top 0.05 linear;-webkit-transition:left 0.05 linear;-moz-transition:top 0.05 linear;-moz-transition:left 0.05 linear;-o-transition:top 0.05 linear;-o-transition:left 0.05 linear;
ns.ztop = -2;
ns._ztop = 2+Math.random()*5;
ns.zleft = Math.random()*sd.offsetWidth;
ns._zleft = Math.random()<0.5? Math.random() : Math.random()*(-1);
ns.style.fontSize = 16*Math.random()+'px';
ns.style.opacity = 0.5+Math.random()*0.5;
ns.style.left = ns.zleft+'px';
sd.appendChild(ns);
ss.push(ns);
}
for(var i=0;i<ss.length;i++){
ss[i].ztop += ss[i]._ztop;
ss[i].zleft += ss[i]._zleft;
if(ss[i].ztop > sd.offsetHeight){
sd.removeChild(ss[i]);
ss.splice(i,1);
}else{
ss[i].style.top = ss[i].ztop+'px';
ss[i].style.left = ss[i].zleft+'px';
}
}
},20);
//close
setTimeout(function(){
var close = document.createElement('div');
close.innerHTML = '{Stop snowing.}';
close.style.cssText += ';cursor:pointer;text-shadow:0 0 5px #fff;color#aaa;font-size:16px;position:fixed;top:20px;right:20px;font-family:arial,sans-erif;z-index:100002';
document.body.appendChild(close);
close.addEventListener('click',function(){
clearInterval(stime);
document.body.removeChild(d);
document.body.removeChild(sd);
document.body.removeChild(close);
window.zythumsgooglesnowloaded = undefined;
},false);
},5000);
window.zythumsgooglesnowloaded = true;
})();
HTML页面下雪特效的更多相关文章
- JQ_下雪特效
这是一个jQuery下雪特效.特效的代码如下: <style>body{background:black;color:white}</style><script>/ ...
- ViewPager页面切换特效
ViewPager页面切换特效如下效果 看效果: 效果1: 效果2: 下面就开始讲解如何实现这两个页面翻转效果 1.首先你得会ViewPager控件的使用(废话!现在还有人不会使用吗???!!) 2. ...
- js页面载入特效如何实现
js页面载入特效如何实现 一.总结 一句话总结:可以加选择器(里面的字符串)作为参数,这样函数就可以针对不同选择器,就很棒了. 1.特效的原理是什么? 都是通过标签的位置和样式来实现特效的. 二.js ...
- 给你的WordPress站点添加下雪特效
今天看到这个教程,感觉挺应景的,就自己尝试了下,效果还行,没截GIF图 方法: 该js文件已支持https,同时已将其及相关雪花图片进行CDN加速处理,可直接调用. 找到WordPress主题的foo ...
- 58种jQuery模拟CSS3过渡页面切换特效
演示网址 http://www.htmleaf.com/Demo/201503251573.html 点击下载
- 实现pushViewController:animated:的不同页面转换特效
1. 首先要明确的是,不使用pushViewController的默认动画,所以在调用这个函数时,要将animated设置为NO.2. 使用普通的来CATransition实现转换效果,代码如下:CA ...
- 纯css实现下雪特效
//------------------ css ------------------- /*Keyframes*/ @keyframes snow { 0% { background-positio ...
- 利用CSS3实现页面淡入动画特效
利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版.chrom ...
- js实现下雪雪花特效
两种下雪特效: 1. <script type="text/javascript"> (function($){ $.fn.snow = function(option ...
随机推荐
- CTSC2017游记&心得记
先来占个坑,骗点访问量 相册地址,戳这里 Day-1 一大清早就被叫了起来,赶去回车站....结果到了那里发现早了快1h?exm?是谁一早清早扰人清梦QAQ 杭州东转车,看到5号检票口被乘警团团围了起 ...
- 1007 Maximum Subsequence Sum
Given a sequence of K integers { N1, N2, ..., NK }. A continuous subsequence is defined to ...
- screen状态变Attached连接会话失败
使用xshell远程登录主机,使用screen命令启动程序运行至后台,意外发现screen session的状态为Attached,使用命令screen -r <session-id>,提 ...
- spring管理事务
2.1 事务管理器 Spring并不直接管理事务,而是提供了多种事务管理器,他们将事务管理的职责委托给Hibernate或者JTA等持久化机制所提供的相关平台框架的事务来实现. Spring事务管理器 ...
- Interface Builder中的技巧
在我工作中经常会遇到有人吐槽Xcode中的interface builder(以下简称IB)不好用的开发者.在我看来,IB是一个非常棒的可视化开发工具,可以非常快捷的设置UI控件的大部分常用属性.下面 ...
- 【linux】CentOS编译程序报错 修复 ./Modules/_ssl.c:64:25: 致命错误:openssl/rsa.h:没有那个文件或目录
如果你在编译时遇到这个错误,这可能是下面的原因:你尝试编译的程序使用OpenSSL,但是需要和OpenSSL链接的文件(库和头文件)在你Linux平台上缺少. 所以在CentOS下, 退到根路径,[需 ...
- iOS- Exception Type: 00000020:什么是看门狗机制(转)
1.前言 前几天我们项目闪退之后遇到的一个Crash,之后逛了许多论坛,博客都没有找到满意的回复 在自己做了深入的研究之后,对iOS的看门狗机制有了一个基本的了解 而有很多奇怪的Crash可 ...
- npm 更新镜像安装Appium
npm -g --registry http://registry.cnpmjs.org install appium
- C 标准库 - <errno.h>
C 标准库 - <errno.h> 简介 C 标准库的 errno.h 头文件定义了整数变量 errno,它是通过系统调用设置的,在错误事件中的某些库函数表明了什么发生了错误.该宏扩展为类 ...
- Cent OS编译环境安装
在进行编译的时候发现总是缺少一些编译的包,安装上了一个,却又少了另一个,最后百度出来结果,记录一下: yum install gcc gcc-c++ gcc-g77 flex bison autoco ...