jquery配合阿里icon实现雪花效果,个人整理

最近过年了,所以也要求我在一个网页上营造出过年的感觉,如果单纯用背景图加css感觉有些僵硬,所以觉得还是需要一个雪花下落的效果,百度了很多,但是都比较庞大,代码也很多,显得臃肿而且很卡。但是最终还是找到了一个很好用的,简单的修改之后,也放在了我的项目上,最终效果意外的还不错。
问题主要就是,掉落下来的不是雪花,而是一堆问号,具体的可以看看底下的参考地址,基本上所有的js代码都是用以下链接的。
手写简单的jQuery雪花飘落效果实例
所以,我还是得自己修改一下。
1.jpg
雪花的符号很多电脑或者手机是显示不出来的,因为它对应的是一个字体,如果用图片的话,还得找雪花的图片,也不能自己控制颜色,总觉得会有些麻烦,于是我选择了阿里icon来解决这个问题。
直接在搜索框里搜索“雪花”就可以出来一大堆,然后只需要选择黑色的就好,因为那些彩色的无法控制颜色,我就选了一个这样的,感觉还行。
Snap.jpg

点击生成fontclass,就可以得到一个远程的css链接,比如我的是这样(其实之前还需要新建项目之类的,我也懒得研究了)

//at.alicdn.com/t/font_838718_myo233hyphp.css

本地测试的话,得加上http开头,在线的话就不需要,css的引用我就不叙述了。
接下来给页面引入jQuery

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

再加一段js代码,都丢在head里面

<script type="text/javascript">
var minSize = 5; //最小字体
var maxSize = 50;//最大字体
var newOne = 100; //生成雪花间隔
var flakColor = "#fff"; //雪花颜色
var flak = $("<div class='xh'></div>").css({position:"absolute","top":"0px"}).html("<i class=\"iconfont icon-xue\"><i>");//定义一个雪花,引用阿里icon的图标
var dhight = $(window).height(); //定义视图高度
var dw =$(window).width(); //定义视图宽度
setInterval(function(){
    var sizeflak = minSize+Math.random()*maxSize; //产生大小不等的雪花
    var startLeft = Math.random()*dw; //雪花生成是随机的left值
    var startopcity = 0.7+Math.random()*0.3; //随机透明度
    var endpositionTop= dhight-100; //雪花停止top的位置
    var endLeft= Math.random()*dw; //雪花停止的left位置
    var durationfull = 5000+Math.random()*3000; //雪花飘落速度不同
    flak.clone().appendTo($("body")).css({
        "left":startLeft ,
        "opacity":startopcity,
        "font-size":sizeflak,
        "color":flakColor
    }).animate({
        "top":endpositionTop,
        "left":endLeft,
        "apacity":0.1
    },durationfull,function(){
        $(this).remove()
    });
},newOne);
</script>

body之间加上用于不断循环复制的div区块

<div class="bk"></div>

最后来一段css

.xh{cursor: pointer;}

这样,雪花飘落的效果就实现了,也可以看看我的项目截图,是这样的:
2.jpeg

如果上述教程没有理解,就下载这个文件吧,其实给自己的网站之类的加上也完全没问题。
雪花效果.zip

发表评论
加载中...

相关文章