网站雪花特效,可设置雪花大小

久伴
久伴
久伴
693
文章
560
评论
2018年4月24日09:40:18 2 1,718 1582字阅读5分16秒

前言

久伴在闲鱼博客看到的觉得还不错适合自节假日使用,就分享一下吧

效果

代码

"text/javascript">    
(function($){    
    $.fn.snow = function(options){    
    var $flake = $('"snowbox" />').css({'position''absolute','z-index':'9999''top''-50px'}).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,    
        opacity0.2    
    },durationFall,'linear',function(){    
        $(this).remove()    
    });    
    }, options.newOn);    
    };    
})(jQuery);    
$(function(){    
    $.fn.snow({     
        minSize5/* 定义雪花最小尺寸 */    
        maxSize: 50,/* 定义雪花最大尺寸 */    
        newOn: 300  /* 定义密集程度,数字越小越密集 */    
    });    
});    
    
久伴
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  1   博主  1
    • 点点滴滴 点点滴滴 0

      谢谢