用js代码和插件实现wordpress雪花飘落效果的四种方法
冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现。有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看。
雪花大图片:
效果代码一
<script type="text/javascript" language="javascript"> (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 + 5; 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", b + "雪花图片的绝对链接地址"); this.el.style.position = "absolute"; this.el.style.display = "block"; this.el.style.zIndex = "99999"; 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() { this.parent.removeChild(this.el); this.parent = this.el = null } } })(); createSnow("", 40); </script>
将以上面代码直接复制粘贴到主题中的Header或者Footer文件中,如果你只想让文章页面显示,那就直接添加到single就可以了。 下面把雪花图片(所需的素材)提供给大家,小图片: 需要大家上传到自己的博客的当前使用的主题中,然后把代码中的链接改成图片所在的位置即可。效果如本页面所示.
效果代码二:
<html> <head> <script> function start(){ var array=new Array(); var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); for(var i=0;i<50;i++){ var Showsnow=new showsnow(); array.push(Showsnow); } time=setInterval(function (){ context.clearRect(0,0,canvas.width,canvas.height); for(var i=0;i<array.length;i++){ array[i].move(); array[i].draw(context); } },500); } function showsnow(){ var y=parseInt(Math.random()*50)*10; var x=parseInt(Math.random()*80)*10; this.draw=function(context){ context.font="50px Calibri"; context.fillText("*",x,y); } this.move=function(){ y+=20; if(y>600){ y=0; } } } </script> </head> <body> <input type="button" value="start" onclick="start()" /> <br/> <canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas> </body> </html>
这个效果演示如下(感觉比较丑,不推荐):
效果代码三
其实实现WordPress博客飘落雪花的还可以用 let it snow 插件。
let it snow插件使用方法我就在这里不唠叨了,和其它插件安装没啥区别,可以直接去下载上传文件夹let it snow里面的文件到/wp-content/plugins/目录,然后激活此插件,在WordPress的管理面板菜单设置插件即可。或者在后头插件库里面直接搜索,也可以找到。
let it snow 官方网站:点击访问
效果代码四
在网上看到一个非常强大的SnowStorm插件。和牛逼啊,好像是google上搜let it snow会有下雪以及霜冻效果的代码,很有创意。觉得好的童鞋可以自己去官网看看。
网上找了一个简单的随机的雪花飘落效果代码分享给大家(这个效果是纯代码写的。雪花就是*。):
稍微解释下里面的几个函数:
1、letItSnow()
就是下雪啦(这句依旧是废)。然后就调用createSnow来产生雪花。
2、createSnow()
产生雪花每个雪花都是一个<i>标签,里面放一个“*”来模拟雪花(google那个copy不下来,居然显示为空格,我了个太阳…),然后放到一个大容器叫snowBox里面,产生的个体push进iArray里面收集起来。雪花采用的是以snowBox为参照的绝对定位方式,top为0px,left就用Math.random()*window.screen.width,让雪花随机在屏幕宽度中产生。
用color来控制雪花的颜色深浅产生景深,范围在0~200之间
用fontSize来控制雪花的大小,范围在10px~15px之间
用time来控制雪花飘落的调用间隔,范围在40ms~50ms之间
用snowInterval来控制雪花产生的间隔,范围在500ms~1000ms之间
然后递归调用本身,不停产生雪花。
3、fallDown()
顾名思义就是让雪花飘落,飘落速度speed为2px,即每次纵向下降2px。这个时候做一个检测,如果雪花下降到固定高度下,即比父容器还高,那么就remove掉它,这样可以减轻浏览器的压力,要不然太多雪花会导致浏览器越走越慢,反正已经给overflow:hidden掉看不见了,眼不见为净。然后在纵向下降的同时调用个windBlow函数,让雪花下降的艺术些。
4、windBlow()
一个命名貌似风吹,其实真是风吹的效果(这话更废.哈哈.),利用一个Math.sin()来产生雪花在空中迂回飘荡的效果,这样雪花就不会单调的直线下降,而是蛇形飘落,控制好飘落的间隔,这样连续性比较好,看起来也舒服些。
function letItSnow(){ var snowBox=document.getElementById("snowBox"); var iArray=new Array(); createSnow(snowBox,iArray); } function fallDown(temObj,iArray){ var speed=2; var top=parseInt(temObj.style.top); if(top>510){//当到超过高度时候就删了它,减轻浏览器压力 for(var i=0;i<iArray.length;i++){ if(temObj==iArray[i]){ iArray.splice(i,1); var snowBox=document.getElementById("snowBox"); snowBox.removeChild(temObj); return false; } } } temObj.style.top=top+speed+"px"; var wind=windBlow(temObj,top); temObj.style.left=parseInt(temObj.style.left)+wind*2+"px"; } function windBlow(temObj,top){ if(parseInt(Math.random())%2==1) return Math.sin(top/16); else return Math.cos(top/16); } function createSnow(snowBox,iArray){ var temObj=document.createElement("i"); var temText=document.createTextNode("*"); temObj.appendChild(temText); temObj.style.left=parseInt(Math.random()*window.screen.width)+"px"; temObj.style.top="0px"; var temNum=parseInt(Math.random()*200); temObj.style.color="#"+temNum.toString(16)+temNum.toString(16)+temNum.toString(16); iArray.push(temObj); snowBox.appendChild(temObj); var temNum=0; while(temNum<10){ temNum=parseInt(Math.random()*15); } temObj.style.fontSize=temNum+"px"; var time=0; while(time<40){ time=parseInt(Math.random()*50); } temObj.timer=setInterval(function(){ fallDown(temObj,iArray); },time); var snowInterval=0; while(snowInterval<500){ snowInterval=parseInt(Math.random()*1000); } var createTimer=setTimeout(function(){ createSnow(snowBox,iArray); clearTimeout(createTimer); },snowInterval); }
演示地址:http://demo.jb51.net/js/2014/snow/
好了,四个效果代码到此结束。希望能帮到有需要的朋友。如果有什么问题可以在下面留言。