圣诞 元旦飘雪 飘礼物代码

这个是参照别人的代码,自己修改的,别人的是飘雪花的,我修改了是飘各种东西,只要做好图片,就能飘,下面就是完整的代码

<script type="text/javascript">
(function ($) {
    $.fn.snow = function (options) {
		//这个是放图片的数组
		var christmasImg=['/themes/invest/images/christmas/0.png','/themes/invest/images/christmas/1.png','/themes/invest/images/christmas/2.png','/themes/invest/images/christmas/3.png','/themes/invest/images/christmas/4.png'];
		
        var $flake = $('<div id="snowbox-k' + 'eleyi-com" />').css({ 'position': 'absolute', 'top': '-50px' }).html('<img src="'+christmasImg[0]+'"/>'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
    minSize: 10,  //雪花的最小尺寸
    maxSize: 20,  //雪花的最大尺寸
    newOn: 2000  //雪花出现的频率
   
},
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 - 40,
endPositionLeft = function(){
	
	var winthDo=startPositionLeft - 100 + Math.random() * 500;
	
		if(winthDo>documentWidth){
			
			return documentWidth
		}else{
			return winthDo
		}
	
	},


durationFall = documentHeight * 10 + Math.random() * 5000;
            $flake.clone().appendTo('body').css({
                left: startPositionLeft,
                opacity: startOpacity,
                'font-size': sizeFlake,
				'z-index':9999
                
            }).animate({
                top: endPositionTop,
                left: endPositionLeft,
                opacity: 0.2
            }, durationFall, 'linear', function () {
                $(this).remove()
            }
);
			$flake.html('<img  src="'+christmasImg[Math.floor(Math.random()*4)]+'" />')//图片随机的出现
			
        }, options.newOn);


    };


})(jQuery);
</script>

只需要轻轻调用一下就可以了,你懂得。

<script type="text/javascript">
    $(function () {
        $.fn.snow({
            minSize: 5,  //雪花的最小尺寸
            maxSize: 50, //雪花的最大尺寸
            newOn: 2000       //雪花出现的频率 这个数值越小雪花越多
        });
    });
</script>

这样完整的效果就出来了,赶快试试吧


你可能感兴趣的:(jquery,代码,图片,飘雪花,飘礼物)