jq js 雪花特效 圣诞特效 冬天特效

实例

<!-- 特效 -->
<script type="text/javascript">
    (function($){
        $.fn.snow = function(options){
        var $flake = $('<div id="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,
            opacity: 0.2
        },durationFall,'linear',function(){
            $(this).remove()
        });
        }, options.newOn);
        };
    })(jQuery);
    $(function(){
        $.fn.snow({ 
            minSize: 5, /* 定义雪花最小尺寸 */
            maxSize: 50,/* 定义雪花最大尺寸 */
            newOn: 300  /* 定义密集程度，数字越小越密集 */
        });
    });
    </script>
    
    
    
    前提条件 引入jq
    使用方法  复制粘贴 
              或者引入