网站下雪特效

1.

<script type="text/javascript">  
 (function($){  
    $.fn.snow = function(options){  
     var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px', 'cursor': 'pointer'}).html('❄'),  
     documentHeight  = $(document).height(),  
     documentWidth   = $(document).width(),  
     defaults = {  
         minSize     : 10,  
         maxSize     : 20,  
         newOn       : 1000,  
         flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */  
     },  
     options = $.extend({}, defaults, options);  
     var interval= setInterval( function(){  
     var startPositionLeft = Math.random() * documentWidth - 100,  
     startOpacity = 0.5 + Math.random(),  
     sizeFlake = options.minSize + Math.random() * options.maxSize,  
     endPositionTop = documentHeight - 200,  
     endPositionLeft = startPositionLeft - 500 + Math.random() * 500,  
     durationFall = documentHeight * 10 + Math.random() * 5000;  
     $flake.clone().appendTo('body').css({  
         left: startPositionLeft,  
         opacity: startOpacity,  
         'font-size': sizeFlake,  
         color: options.flakeColor  
     }).animate({  
         top: endPositionTop,  
        left: endPositionLeft,  
         opacity: 0.2  
     },durationFall,'linear',function(){  
        $(this).remove()  
     });  
     }, options.newOn);  
     };  
 })(jQuery);  
 $(function(){  
     $.fn.snow({   
         minSize: 5, /* 定义雪花最小尺寸 */  
       maxSize: 50,/* 定义雪花最大尺寸 */  
         newOn: 300  /* 定义密集程度,数字越小越密集 */  
    });  
 });  
</script>

2.

<script type="text/javascript">
       window.onload = function () {
                    var minSize = 5; //最小字体
                    var maxSize = 50;//最大字体
                    var newOne = 100; //生成雪花间隔
                    var flakColor = "#fff"; //雪花颜色
                    var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("❉");//定义一个雪花
                    var dhight = $(window).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()*5000; //雪花飘落速度不同
                    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>

 



微信扫描下方的二维码阅读本文

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容