js运动技术--链式运动框架

你的名字 2024-02-17 23:20 11阅读 0赞

其原理是函数startMove多了一个参数，这个参数是一个函数，可以在定时器结束时调用。

<!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];
    				}
    			}
    			
    			
    			function startMove(obj,style1,iTarget,fnEnd){
    				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);
    						
    						if(fnEnd)fnEnd();			//传递了函数则执行；		
    					}
    					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);
    			}
    			
    			
    			window.onclick = function(){
    				var oDiv1 = document.getElementById("div1");
    				oDiv1.onmouseover = function(){
    					startMove(oDiv1,'width',400,function(){
    						startMove(oDiv1,'height',400,function(){
    							startMove(oDiv1,'opacity',100);
    						});
    					});
    				}
    				oDiv1.onmouseout = function(){
    					startMove(oDiv1,'opacity',30,function(){
    						startMove(oDiv1,'height',200,function(){
    							startMove(oDiv1,'width',200);
    						})
    					});
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<input type = "text" id = "txt"/><br />
    		<div id = "div1">改变透明度</div>
    	</body>
    </html>