设为首页 - 加入收藏 - 网站地图 SecYe安全 Www.SecYe.Com - 国内网络信息安全IT技术门户网
当前位置:SecYe > 网页设计 > Javascript > 正文

js实现飘过效果

时间:2012-12-13 00:59 来源:未知 作者:www.secye.com 阅读:

在群里有人在讨论用php怎么生成动态的飘过效果(具体可参考下面的demo),于是耐不住手痒,用js写了个实现版本。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript">
			// 初始化
			var _pos = 0; // 初始位置
			var _direcation = 1; // 初始方向,1为x+方向,-1为x-方向
			var _x = 5; // 最大宽度
			var _y = 40; // 最大高度
			
			// 动态更新
			function update(){
				var pos = _pos; // 当前位置
				var direcation = _direcation; // 当前方向
				var output = \'\';
			
				for(var i=0; i<_y; i++){
					output += \'<div>\' + rp(\'.\',pos) + \'飘过</div>\';
					if((pos<=0&&direcation<=0)||(pos>=_x&&direcation>=0))
						direcation *= -1; // 更新方向
					pos += direcation * 1; // 更新位置
				}
				$(\'#happy\').html(output);

				// 更新初始数据
				if((_pos<=0&&_direcation<=0)||(_pos>=_x&&_direcation>=0))
					_direcation *= -1; // 更新方向
				_pos += _direcation * 1; // 更新位置
			}

			// 重复输出字符串N次
			function rp(str,len){
				//if(!len&&len!==0) len += 2;
				return new Array(len+1).join(str);
			}
		</script>
		<style type="text/css">
			body,html{font-size:12px; letter-spacing: 0.2em;}
			div{margin:5px 20px;}
		</style>
	</head>
	<body>
		<div id="happy"></div>
		<script type="text/javascript">
			setInterval(\'update()\',80);
		</script>
	</body>
</html>

 

 

 

 

 

 

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript">
			// 初始化
			var _pos = 0; // 初始位置
			var _direcation = 1; // 初始方向,1为x+方向,-1为x-方向
			var _x = 5; // 最大宽度
			var _y = 40; // 最大高度
			
			// 动态更新
			function update(){
				var pos = _pos; // 当前位置
				var direcation = _direcation; // 当前方向
				var output = \'\';
			
				for(var i=0; i<_y; i++){
					output += \'<div>\' + rp(\'.\',pos) + \'飘过</div>\';
					if((pos<=0&&direcation<=0)||(pos>=_x&&direcation>=0))
						direcation *= -1; // 更新方向
					pos += direcation * 1; // 更新位置
				}
				$(\'#happy\').html(output);

				// 更新初始数据
				if((_pos<=0&&_direcation<=0)||(_pos>=_x&&_direcation>=0))
					_direcation *= -1; // 更新方向
				_pos += _direcation * 1; // 更新位置
			}

			// 重复输出字符串N次
			function rp(str,len){
				//if(!len&&len!==0) len += 2;
				return new Array(len+1).join(str);
			}
		</script>
		<style type="text/css">
			body,html{font-size:12px; letter-spacing: 0.2em;}
			div{margin:5px 20px;}
		</style>
	</head>
	<body>
		<div id="happy"></div>
		<script type="text/javascript">
			setInterval(\'update()\',80);
		</script>
	</body>
</html>	
	

本文来源:SecYe安全网[http://www.secye.com] (责任编辑:SecYe安全)

点击复制链接 与好友分享!

顶一下
(0)
0%
踩一下
(0)
0%
上一篇:没有了
下一篇:canvas+js+css3实现的时钟