• 技术文章 >web前端 >js教程

    用js代码和插件实现wordpress雪花飘落效果的四种方法_javascript技巧

    2016-05-16 16:26:35原创1452

    冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现。有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看。

    雪花大图片:

    雪花素材图片

    效果代码一

    将以上面代码直接复制粘贴到主题中的Header或者Footer文件中,如果你只想让文章页面显示,那就直接添加到single就可以了。 下面把雪花图片(所需的素材)提供给大家,snow小图片: 需要大家上传到自己的博客的当前使用的主题中,然后把代码中的链接改成图片所在的位置即可。效果如本页面所示.

    效果代码二:

     
    
    
    
    

    这个效果演示如下(感觉比较丑,不推荐):

    效果代码三

    其实实现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/

    好了,四个效果代码到此结束。希望能帮到有需要的朋友。如果有什么问题可以在下面留言。

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:js雪花飘落
    上一篇:node.js中的fs.lstat方法使用说明_node.js 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 聊聊Node.js中怎么用async函数• 聊聊Node项目中怎么操作MySQL• 一文聊聊Angular中的依赖注入• react native路由跳转怎么实现• Node实战学习:浏览器预览项目所有图片
    1/1

    PHP中文网