开发者社区> 问答> 正文

圣诞节马上到了,如何让自己的网站飘满雪花?

圣诞节马上到了,如何让自己的网站飘满雪花?

展开
收起
问问小秘 2019-12-23 15:02:48 850 0
2 条回答
写回答
取消 提交回答
  • 建议参考这篇文章

    WordPress博客网站下雪特效

    2019-12-23 15:37:53
    赞同 展开评论 打赏
  • 
    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
    
    
    2019-12-23 15:06:42
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
《长安十二时辰》 立即下载
长安十二时辰背后的技术秘籍 立即下载
鱼和熊掌可得兼-双内核特性解读 立即下载