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

本文链接：https://blog.csdn.net/u013064109/article/details/44468955

本文探讨JavaScript运动框架的发展历程，揭示如何使用这些框架创建各种web2.0网页动画。通过了解框架的演变，开发者可以更好地掌握JavaScript动画技术。

摘要由CSDN通过智能技术生成

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作为对象的