js运动技术--多物体运动框架（变宽、变高、改变字体、改变border、透明度）以及替换offset的使用

本文链接：https://blog.youkuaiyun.com/ldw201510803006/article/details/75068306

本文通过具体实例介绍了如何使用CSS实现元素宽度、高度、字体大小及边框宽度的变化，并针对透明度的特殊性提供了处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例1：变宽、变高、改变字体、改变border

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1,#div2,#div4{height: 200px;width: 200px;background: red;margin: 20px;float: left;left: 20px; top: 20px;
			border: 10px solid black;}
			#div3{height: 200px;width: 200px;background: red;margin: 20px;float: left;left: 20px; top: 20px;
			border: 10px solid black;font-size: 14px;}
			
		</style>
		<script>
			function getStyle(obj,name){
				if(obj.currentStyle){
					return obj.currentStyle[name];
				}
				else{
					return getComputedStyle(obj,false)[name];
				}
			}
			
			window.onclick = function(){
				var oDiv1 = document.getElementById("div1");
				oDiv1.onmouseover = function(){
					startMove(this,'width',400);  //变宽
				}
				oDiv1.onmouseout = function(){
					startMove(this,'width',200);
				}
				
				
				var oDiv2 = document.getElementById("div2");
				oDiv2.onmouseover = function(){
					startMove(this,'height',400);//变高
				}
				oDiv2.onmouseout = function(){
					startMove(this,'height',200);
				}
	
	            var oDiv3 = document.getElementById("div3");
	            oDiv3.onmouseover = function(){
	            	startMove(this,'fontSize',30);//改变字体
	            }
	            oDiv3.onmouseout = function(){
	            	startMove(this,'fontSize',14);
	            }
	            
	            var oDiv4 = document.getElementById("div4");
	            oDiv4.onmouseover = function(){
	            	startMove(this,'borderWidth',100);
	            }
	            oDiv4.onmouseout = function(){
	            	startMove(this,'borderWidth',10);
	            }
			}
			
			function startMove(obj,style1,iTarget){
				var oTxt = document.getElementById("txt");		
				clearInterval(obj.timer);
		
				obj.timer = setInterval(function(){
					var  cur = parseInt(getStyle(obj,style1));
					var speed = (iTarget - cur) / 6;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					
					oTxt.value = speed;
					
					if(iTarget == cur){
						clearInterval(obj.timer);
					}
					else{
						obj.style[style1] = cur + speed + 'px';
					}
				},30);
			}
			
		</script>
	</head>
	<body>
		<input type = "text" id = "txt"/><br />
		<div id = "div1">变宽</div>
		<div id = "div2">变高</div>
		<div id = "div3">改变字体</div>
		<div id = "div4">改变border</div>
	</body>
</html>

对于透明度来说，由于涉及到小数，故需要特殊处理才行。方式如下

案例2：较完整的多物体运动框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{height: 200px;width: 200px;background: red;margin: 20px;float: left;left: 20px; top: 20px;
			border: 10px solid black;
			filter: alpha(opacity;30);opacity: 0.3;}
		</style>
		<script>
			function getStyle(obj,name){
				if(obj.currentStyle){
					return obj.currentStyle[name];
				}
				else{
					return getComputedStyle(obj,false)[name];
				}
			}
			
			window.onclick = function(){
				var oDiv1 = document.getElementById("div1");
				oDiv1.onmouseover = function(){
					startMove(this,'opacity',100);  //属性可以任意改变了，这里验证opacity
				}
				oDiv1.onmouseout = function(){
					startMove(this,'opacity',30);
				}
			}
			
			function startMove(obj,style1,iTarget){
				var oTxt = document.getElementById("txt");		
				clearInterval(obj.timer);
		
				obj.timer = setInterval(function(){
					var cur = 0;
					if(style1 == 'opacity'){
						 cur = parseFloat(getStyle(obj,style1))*100;
					}
					else {
						cur = parseInt(getStyle(obj,style1));
					}
					
					var speed = (iTarget - cur) / 6;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					
					oTxt.value = cur;
					
					if(iTarget == cur){
						clearInterval(obj.timer);
					}
					else {
						if(style1 == 'opacity'){
							obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
							obj.style.opacity = (cur+speed) / 100;
						}
						else{
							obj.style[style1] = cur + speed + 'px';
						}
					}
				},30);
			}
			
		</script>
	</head>
	<body>
		<input type = "text" id = "txt"/><br />
		<div id = "div1">改变透明度</div>
	</body>
</html>