冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现。有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看。雪花大图片:效果代码一登录后复制将以上面代码直接复制粘贴到主题中的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/好了,四个效果代码到此结束。希望能帮到有需要的朋友。如果有什么问题可以在下面留言。
08-27 20:48