Saber 酱的抱枕

Fly me to the moon

12/9
2014
学习

网页雪花飘落效果

代码需jq支持,无需对html进行改动。我已经在本站用上了,是不是很有过年的气氛呢~(PS:灵梦的脸就是不给你们看ˋ( ° ▽、° )

我只贴上js代码,将代码拷贝至网页任意位置均可,但不要放在有错误的js之后。

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script  type="text/javascript">
(function($){
	$.fn.snow = function(options){
			var $flake 			= $('<div id="snowbox" />').css({'position': 'absolute', 'top': '-50px'}).html('&amp;#10052;'),
				documentHeight 	= $(document).height(),
				documentWidth	= $(document).width(),
				defaults		= {
									minSize		: 10,		//雪花的最小尺寸
									maxSize		: 20,		//雪花的最大尺寸
									newOn		: 1000,		//雪花出现的频率
									flakeColor	: "#FFFFFF"	//懒人建站 www.51xuediannao.com   整理
								},
				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		= startPositionLeft - 100 + 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);

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

这段代码比较耗资源,经测试,在chrome下流畅运行,FF卡卡的,IE10则出乎意料的流畅。

这个方法的一个缺点是:雪花落到底部之后会导致横向出现滚动条(也就是网页宽度开始来回变化),高度也会有小幅度变化,但不影响页面功能的使用。

来自懒人建站,查看原文点我

网页雪花飘落效果