飘雪 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../JQuery/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color: #000;
				overflow: hidden;
			}
			#div{
				width: 1200px;
				height: 800px;
				margin: 0 auto;
				background: url(image/iceScreen.jpg) no-repeat;
				background-size:100% 100%;
			}
			
		</style>
	</head>
	<body>
		<audio id="audio" src="another/梶浦由記 - Melody.mp3" autoplay loop></audio>
		<div id="div">
			
		</div>
		
		
		<script type="text/javascript">
			$(function(){
				
				var ice = $('<div></div>').css({'position':'absolute','top':'-26px'}).html('❅');  //定义雪花
				var winWidth = $(document).width();		//获取浏览器宽度
				var winHeight = $(document).height();		//获取浏览器高度
				
				setInterval(function(){
					var iceSize = Math.random()*20+6;               //雪花大小
					var startLeft = Math.random()*winWidth; 		//雪花初始位置
					var startOpacity = Math.random()*0.3+0.7;		//雪花初始透明度
					var endLeft = Math.random()*winWidth;			//雪花掉落位置
					var endTop = winHeight;							//雪花落地
					var endOpacity = Math.random()*0.1+0.3;			//雪花最终透明度
					var flyTime = Math.random()*6000+4000; 			//雪花飘落时间
					
					//创建雪花
					ice.clone().appendTo('body').css({				//每200ms复制一朵雪花
						//初始的雪花状态
						'left':startLeft,
						'opacity':startOpacity,
						'font-size':iceSize,
						'color':'white',
					}).animate({
						//雪花的运动过程
						'top':endTop,
						'left':endLeft,
						'opacity':endOpacity,
					},flyTime,function(){
						//落地后清除雪花
						$(this).remove();
					});
					
				},200)
				
				
				
			})
		</script>
	</body>
</html>

　　

 

posted @ 2017-09-13 14:55  熊♂吉  阅读(124)  评论(0)    收藏  举报