JavaScript运动框架大集结---拥有JavaScript完美运动框架你将制作任意基于web2.0网页动画

亦凉 2022-08-07 06:48 177阅读 0赞

# JavaScript运动框架大集结---拥有一套JavaScript完美运动框架你将制作任意基于web2.0网页动画 #

## JS运动框架的发展演变 ##

1 starmove(iTarget)  原始运动框架
    ///
    <script type="text/javascript">
    			window.οnlοad=function(){
    				var oDiv=document.getElementById("div1");
    				var oBt=document.getElementsByTagName('input')[0];
    				var time=null;
    				oBt.οnclick=function(){
    					clearInterval(time);//这里首先要关闭一个定时器，这是因为解决在运动过程中多次点击按钮从而产生多个定时器叠加的bug
    					time=setInterval(function(){
    						var speed=7;
    						if(oDiv.offsetLeft<=600)
    						oDiv.style.left=oDiv.offsetLeft+speed+'px';
    						else{
    							clearInterval(time);
    						}
    					},30);
    				}
    			}
    </script>
    ///
    2 startmove(obj,iTarget) 多物体运动框架
    ///
    <script type="text/javascript">
    			window.οnlοad=function(){
    				var oDiv=document.getElementsByTagName('div');
    				for(var i=0;i<oDiv.length;i++)
    				{
    					oDiv[i].time=null;//并对每个div都开启一个定时器
    					oDiv[i].οnmοuseοver=function(){
    						startmove(this,window.screen.width);//this表示当前的对象
    					}
    					oDiv[i].οnmοuseοut=function(){
    						startmove(this,80);
    					}
    				}
    			};
    			  function getStyle(obj,name){//获取行间样式的函数
            	if(obj.currentStyle){
            		return obj.currentStyle[name];
            	}
            	else{
            		return getComputedStyle(obj,false)[name];
            	}
            }
    			//var time=null;
    			function startmove(obj,iTarget){//obj作为对象的参数
    				clearInterval(obj.time);//关掉当前对象的定时器
    				obj.time=setInterval(function(){//开启当前对象的定时器
    					var speed=(iTarget-parseInt(getStyle(obj,'width')))/20;
    					speed=speed>=0?Math.ceil(speed):Math.floor(speed);//缓冲运动中的关键点，精确检测
    					if(iTarget==parseInt(getStyle(obj,'width'))){clearInterval(obj.time);}//关闭当前的定时器
    					else{
    						obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';
    					}
    				},30);
    			}
    		</script>
    ///
    3 startmove(obj,attr,iTarget) 任意值的运动框架
    //
    <script type="text/javascript">
    			window.οnlοad=function(){
    				var oDiv=document.getElementsByTagName('div');
    				oDiv[0].οnmοuseοver=function(){
    					startmove(this,'font-size',60);
    				}
    				oDiv[0].οnmοuseοut=function(){
    					startmove(this,'font-size',14);
    				}
    				oDiv[1].οnmοuseοver=function(){
    					startmove(this,'opacity',100);
    				}
    				oDiv[1].οnmοuseοut=function(){
    					startmove(this,'opacity',30);
    				}
    				oDiv[2].οnmοuseοver=function(){
    					startmove(this,'height',400);
    				}
    				oDiv[2].οnmοuseοut=function(){
    					startmove(this,'height',200);
    				}
    				oDiv[3].οnmοuseοver=function(){
    					startmove(this,'width',600);
    				}
    				oDiv[3].οnmοuseοut=function(){
    					startmove(this,'width',200);
    				}
    				oDiv[4].οnmοuseοver=function(){
    					startmove(this,'borderWidth',100);
    				}
    				oDiv[4].οnmοuseοut=function(){
    					startmove(this,'borderWidth',1);
    				}
    				
    				oDiv[5].οnmοuseοver=function(){
    					startmove(this,'left',500);
    				}
    				oDiv[5].οnmοuseοut=function(){
    					startmove(this,'left',0);
    				}
    				
    			}
    			
    			function getStyle(obj,name){
    				if(obj.currentStyle){
    					return obj.currentStyle[name];
    				}
    				else{
    					return getComputedStyle(obj,false)[name];
    				}
    			}
    			function startmove(obj,attr,iTarget){
    				
    				clearInterval(obj.time);
    				obj.time=setInterval(function(){
    					var cur=0;
    					if(attr=='opacity'){
    						cur=Math.round(parseFloat(getStyle(obj,attr))*100);//Math.round(value);方法实现小数的四舍五入
    					}
    					else{
    						cur=parseInt(getStyle(obj,attr));}
    					
    					var speed=(iTarget-cur)/20;
    					speed=speed>=0?Math.ceil(speed):Math.floor(speed);
    					if(iTarget==cur){
    						clearInterval(obj.time);
    					}
    					else{
    						if(attr=='opacity'){
    							obj.style.filter='alpha(opacity:'+(cur+speed)+')';
    							obj.style.opacity=(cur+speed)/100;
    						}
    						else{obj.style[attr]=cur+speed+'px';}
    						
    					}
    				},30);
    			}
    		</script>
    /
    4 startmove(obj,attr,iTarget,fn) 链式运动框架
    
    /******************************获取行间函数**************************************/
    		function getStyle(obj,name){
    				if(obj.currentStyle){
    					return obj.currentStyle[name];
    				}
    				else{
    					return getComputedStyle(obj,false)[name];
    				}
    			}
    /******************************链式运动函数****************************************************/			
    			function startmove(obj,attr,iTarget,fnEnd){//另外加一个函数的参数fnEnd
    				
    				clearInterval(obj.time);
    				obj.time=setInterval(function(){
    					var cur=0;
    					if(attr=='opacity'){
    						cur=Math.round(parseFloat(getStyle(obj,attr))*100);//Math.round(value);方法实现小数的四舍五入
    					}
    					else{
    						cur=parseInt(getStyle(obj,attr));}
    					
    					var speed=(iTarget-cur)/20;
    					speed=speed>=0?Math.ceil(speed):Math.floor(speed);
    					if(iTarget==cur){
    						clearInterval(obj.time);
    						if(fnEnd)fnEnd();//如果要调用了函数则会调用该函数
    					}
    					else{
    						if(attr=='opacity'){
    							obj.style.filter='alpha(opacity:'+(cur+speed)+')';
    							obj.style.opacity=(cur+speed)/100;
    						}
    						else{obj.style[attr]=cur+speed+'px';}
    						
    					}
    				},30);
    				/********************************链式运动函数调用*********/
    				<script type="text/javascript">
    					window.οnlοad=function(){
    						var oDiv=document.getElementById("div1");
    					    oDiv.οnmοuseοver=function(){
    					    	  startmove(oDiv,'width',800,function(){
    				              	startmove(oDiv,'height',500,function(){
    				              		startmove(oDiv,'opacity',100);
    				              	});
    				              });
    					    }
    					    oDiv.οnmοuseοut=function(){
    					    	startmove(oDiv,'opacity',30,function(){
    					    		startmove(oDiv,'height',100,function(){
    					    			startmove(oDiv,'width',100);
    					    		});
    					    	});
    					    }
    				            
    					}
    				</script>
    				                                           
    			}
    ///
    
    5 startmove(obj,json,fn) 完美运动框架
    ///
    		function getStyle(obj,name){
    				if(obj.currentStyle){
    					return obj.currentStyle[name];
    				}
    				else{
    					return getComputedStyle(obj,false)[name];
    				}
    			}
    		//startmove(oDiv,{width:400,height:400})
    			function startmove(obj,json,fnEnd){
    				
    				clearInterval(obj.time);
    				obj.time=setInterval(function(){
    					var bStop=true;//假设所有的值都已经到了
    					for(var attr in json)
    					{
    					var cur=0;
    					if(attr=='opacity'){
    						cur=Math.round(parseFloat(getStyle(obj,attr))*100);//Math.round(value);方法实现小数的四舍五入
    					}
    					else{
    						cur=parseInt(getStyle(obj,attr));}
    					
    					var speed=(json[attr]-cur)/20;
    					speed=speed>=0?Math.ceil(speed):Math.floor(speed);
    					if(cur!=json[attr])  bStop=false;
    						if(attr=='opacity'){
    							obj.style.filter='alpha(opacity:'+(cur+speed)+')';
    							obj.style.opacity=(cur+speed)/100;
    						}
    						else{obj.style[attr]=cur+speed+'px';}
    				   }
    					if(bStop){
    						clearInterval(obj.time);
    			             if(fnEnd)fnEnd();
    					}
    				},30);
    			}