码迷,mamicode.com
首页 > Web开发 > 详细

博客园背景加入飘落雪花的js代码

时间:2019-10-17 16:06:18      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:js代码   dom   remove   duration   间隔   min   rip   字体   city   

<script type="text/javascript">
   window.onload = function () {
                var minSize = 15; //最小字体
                var maxSize = 30;//最大字体
                var newOne = 900; //生成雪花间隔, 数值越小越快
                var flakColor = "#1bd3ff"; //雪花颜色
                var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("?");//定义一个雪花
                var dhight = $("body").height(); //定义视图高度
                var dw =$(window).width()-80; //定义视图宽度
                setInterval(function(){
                var sizeflak = minSize+Math.random()*maxSize; //产生大小不等的雪花
                var startLeft = Math.random()*dw; //雪花生成是随机的left值
                var startOpacity = 0.7+Math.random()*0.3; //随机透明度
                var endTop= dhight-100; //雪花停止top的位置
                var endLeft= Math.random()*dw; //雪花停止的left位置
                var durationfull = 5000+Math.random()*600000; //雪花飘落速度不同, 数值越大越慢
                flak.clone().appendTo($("body")).css({
                "left":startLeft ,
                "opacity":startOpacity,
                "font-size":sizeflak,
                "color":flakColor
                }).animate({
                "top":endTop,
                "left":endLeft,
                "apacity":0.1
                },durationfull,function(){
                $(this).remove()
                });
                },newOne);
            }
 </script>

 

博客园背景加入飘落雪花的js代码

标签:js代码   dom   remove   duration   间隔   min   rip   字体   city   

原文地址:https://www.cnblogs.com/dmxk/p/11692184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!