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

向右看齐 2024-02-17 23:19 18阅读 0赞

案例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>