js雪花特效_跟随页面滚动的下雪特效
2013-12-20 09:00
861 查看
这星期宁波有些地方已经开始下雪了,气温一下子降了很多,又快过年了。冬天最喜欢的就是下雪了,我想没有几个人不喜欢的,所以就从网络上到处收集有关雪花的特效,今天就来分享第一个JS雪花特效。这是个从淘宝网上拿下来的下雪特效,雪花从页面的顶部一直往下飘落,当你向下滚动页面时雪花又从当前页面的顶部开始下,而不是一直是从页面顶部落下来的。
js雪花特效代码
直接复制上面的js代码就可以查看到效果,如果想了下载更多雪花特效可以访问 jsctrlc特效网 :http://www.jsctrlc.com/tags/雪花/
js雪花特效代码
(function(){ function k(a,b,c){ if(a.addEventListener) a.addEventListener(b,c,false); else { a.attachEvent&&a.attachEvent("on"+b,c) } } function g(a){ if(typeof window.onload!="function"){ window.onload=a; }else{ var b=window.onload; window.onload=function(){ b(); a() } } } function h(){ var a={}; for(type in{Top:"",Left:""}){ var b=type=="Top"?"Y":"X"; if(typeof window["page"+b+"Offset"]!="undefined") a[type.toLowerCase()]=window["page"+b+"Offset"]; else{ b=document.documentElement.clientHeight?document.documentElement:document.body; a[type.toLowerCase()]=b["scroll"+type] } } return a } function l(){ var a=document.body,b; if(window.innerHeight) b=window.innerHeight; else if(a.parentElement.clientHeight) b=a.parentElement.clientHeight; else if(a&&a.clientHeight) b=a.clientHeight; return b } function i(a){ this.parent=document.body; this.createEl(this.parent,a); this.size=Math.random()*5+3; this.el.style.width=Math.round(this.size)+"px"; this.el.style.height=Math.round(this.size)+"px"; this.maxLeft=document.body.offsetWidth-this.size; this.maxTop=document.body.offsetHeight- this.size; this.left=Math.random()*this.maxLeft; this.top=h().top+1; this.angle=1.4+0.2*Math.random(); this.minAngle=1.4; this.maxAngle=1.6; this.angleDelta=0.01*Math.random(); this.speed=2+Math.random() } var j=false; g(function(){ j=true }); var f=true; window.createSnow=function(a,b){ if(j){ var c=[],m=setInterval(function(){ f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a)); !f&&!c.length&&clearInterval(m); for(var e=h().top,n=l(),d=c.length-1;d>=0;d--) if(c[d]) if(c[d].top<e||c[d].top+c[d].size+1>e+n){ c[d].remove(); c[d]=null; c.splice(d,1) }else{ c[d].move(); c[d].draw() } },40); k(window,"scroll",function(){ for(var e=c.length-1;e>=0;e--) c[e].draw() }) }else g(function(){ createSnow(a,b) }) }; window.removeSnow=function(){ f=false }; i.prototype={ createEl:function(a,b){ this.el=document.createElement("img"); this.el.setAttribute("src","now.gif"); //this.el.setAttribute("class","fixpng"); this.el.style.position="absolute"; this.el.style.display="block"; this.el.style.zIndex="99"; //document.getElementById('snow').appendChild(this.el); this.parent.appendChild(this.el) }, move:function(){ if(this.angle< this.minAngle||this.angle>this.maxAngle) this.angleDelta=-this.angleDelta; this.angle+=this.angleDelta; this.left+=this.speed*Math.cos(this.angle*Math.PI); this.top-=this.speed*Math.sin(this.angle*Math.PI); if(this.left<0) this.left=this.maxLeft; else if(this.left>this.maxLeft) this.left=0 }, draw:function(){ this.el.style.top=Math.round(this.top)+"px"; this.el.style.left=Math.round(this.left)+"px" }, remove:function(){ //document.getElementById('snow').removeChild(this.el); //document.getElementById('snow').this.el=null; this.parent.removeChild(this.el); this.parent=this.el=null } } })(); /** * This function takes 2 arguments * First is the path to the directory with snowflake images * Second is the maximum number of snowflakes, please do not * set this number above 60 as it will impact the performance */ createSnow('', 60);
直接复制上面的js代码就可以查看到效果,如果想了下载更多雪花特效可以访问 jsctrlc特效网 :http://www.jsctrlc.com/tags/雪花/
相关文章推荐
- 分享几个超级震憾的图片特效
- 15个款优秀的 jQuery 图片特效插件推荐
- jquery全屏图片幻灯片展示特效
- jquery插件图片放大显示插件lightBox2.6最新版
- jquery全屏图片滑动特效插件cbpFWSlider
- 【HTML5示例代码分享】HTML5图片自动归类特效
- 【HTML5示例代码分享】基于CSS3和jQuery的相片墙-ImageWall
- Android下QQ空间查看大图特效
- 喜欢
- js鼠标移上去当前放大图片突出显示特效代码
- jquery带进度条的焦点图片特效插件
- jquery焦点图片左右滑动切换特效代码
- 9 关于数据仓库维度数据处理的方法探究系列——雪花维
- 雪花效果
- 使用javascript开发的视差滚动效果的云彩
- 【码云周刊第 30 期】打造场景化的图片特效处理工具
- Twitter-Snowflake,64位自增ID算法详解
- Android下QQ空间查看大图特效
- VC开发圣诞程序雪花飞舞的世界
- Android实现 制作隐藏图片效果 "幻影坦克"