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

前言

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

效果

代码

"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  /* 定义密集程度,数字越小越密集 */    
    });    
});    
    

给TA买糖
共{{data.count}}人
人已赞赏
前端资源

jquery下载所有版本

2018-4-20 15:33:26

前端资源

全站灰色-特殊节日使用-通用

2018-5-14 22:47:01

2 条回复 A文章作者 M管理员
  1. 谢谢

    • 客气了

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索