用js代码和插件实现wordpress雪花飘落效果的四种方法_javascript技巧
雪花大图片:
效果代码一
将以上面代码直接复制粘贴到主题中的Header或者Footer文件中,如果你只想让文章页面显示,那就直接添加到single就可以了。 下面把雪花图片(所需的素材)提供给大家,小图片: 需要大家上传到自己的博客的当前使用的主题中,然后把代码中的链接改成图片所在的位置即可。效果如本页面所示.
效果代码二:
这个效果演示如下(感觉比较丑,不推荐):
效果代码三
其实实现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()
产生雪花每个雪花都是一个标签,里面放一个“*”来模拟雪花(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
演示地址:http://demo.jb51.net/js/2014/snow/
好了,四个效果代码到此结束。希望能帮到有需要的朋友。如果有什么问题可以在下面留言。