js运动练习_javascript文字移动学如逆水行舟不进则退心如平原纵马-CSDN博客

本文链接：https://blog.csdn.net/u013291076/article/details/37883031

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>movement</title>
		<meta name="author" content="Administrator" />
		<!-- Date: 2014-07-16 -->
		<style>
			.div1{width:100px;height:50px;background:#FF0000;margin:10px;border:10px solid yellow;}
			.div2{width:200px;height:200px;background:#FF0000;margin:20px;float:left;opacity:0.3;filter:alpha(opacity=30);}
		</style>
		<script>
			window.οnlοad=function ()
			{
				var oDiv=document.getElementsByClassName('div1');
				for (var i=0;i<oDiv.length;i++)
				{
					oDiv.timer=null;//定义一个timer属性，使每一个div有一个独立的定时器
					oDiv[i].οnmοuseοver=function ()
					{
						startMove(this,'width',400);	
					};
					oDiv[i].οnmοuseοut=function ()
					{
						startMove(this,'width',100);
					};
				};	
				
				var oDiv1=document.getElementsByClassName('div2');
				for (var i=0;i<oDiv1.length;i++)
				{
					oDiv1[i].alpha=null;
					oDiv1[i].οnmοusemοve=function ()
					{
						startMove1(this,100);
					};
					
					oDiv1[i].οnmοuseοut=function ()
					{
						startMove1(this,30);
					};
				};
			};
			
			//取得样式
			function getStyle(obj,name)
			{
				if(obj.currentStyle)
				{
					return obj.currenStyle[name];
				}else
				{
					return getComputedStyle(obj,false)[name];
				};
			};
			
			function startMove(obj,attr,iTarget)
			{
				clearInterval(obj.timer);
				obj.timer=setInterval(function ()
				{
					var get=parseInt(getStyle(obj,attr));//如果用offsetWidth去取宽，那么它会受到盒模型的影响而出现bug;
					var speed=(iTarget-get)/6;
					speed=speed>0?Math.ceil(speed):Math.floor(speed);//speed为正向上取整，否则向下取整
						
					if(get==iTarget)
					{
						clearInterval(obj.timer);
					}else
					{
						obj.style.width=get+speed+'px';
					};
				},30);
			};
			
			
			function startMove1(obj,iTarget)
			{
				clearInterval(obj.timer);
				obj.timer=setInterval(function ()
				{
					var speed=(iTarget-obj.alpha)/6;
					speed=speed>0?Math.ceil(speed):Math.floor(speed);
					
					if(obj.alpha==iTarget)
					{
						clearInterval(obj.timer);
					}else
					{
						obj.alpha+=speed;
						obj.style.filter='alpha(opacity='+obj.alpha+')';
						obj.style.opacity=obj.alpha/100;
					}
				});
			};
		</script>
		
	</head>
	<body>
		<div class="div1"></div>
		<div class="div1"></div>
		<div class="div1"></div>
		
		<div class="div2"></div>
		<div class="div2"></div>
		<div class="div2"></div>
	</body>
</html>