一个简单的纵横向动画效果类_交互设计教程-查字典教程网

摘要：分享一个简易的动画效果类,思路源于JavaScriptDOM编程艺术,这本书是我JavaScript的启蒙书,看过四篇,至今时常翻起.我想也...

分享一个简易的动画效果类,思路源于JavaScript DOM编程艺术,这本书是我JavaScript的启蒙书,看过四篇,至今时常翻起.我想也是每个JavaScript初学者的必备书.Mr.Think非常推崇这本书,真的很棒!
思路其实很基础,很简单,主要是通过setTimeout()方法,并利用CSS绝对定位来以改变图片位置以实现动画效果.纯DOM方式编写,兼容所有支持JavaScript的浏览器及其他API.
动画效果类核心JavaScript代码:

//@Mr.Think---简易动画类
function moveElem(elemId,final_x,final_y,interval){
   if (!document.getElementById) return false;
   if (!document.getElementById(elemId)) return false;
   var elem=document.getElementById(elemId);
   if(elem.movement) clearTimeout(elem.movement);
   if(!elem.style.left) elem.style.left="0px";
   if(!elem.style.top) elem.style.top="0px";
   var xpos=parseInt(elem.style.left);
   var ypos=parseInt(elem.style.top);
   if(xpos==final_x&&ypos==final_y) return true;
   if(xpos<final_x){
   var divisor=Math.ceil((final_x-xpos)/10);
   xpos=xpos+divisor;
   }
   if(xpos>final_x){
   var divisor=Math.ceil((xpos-final_x)/10);
   xpos=xpos-divisor;
   }
   if(ypos<final_y){
   var divisor=Math.ceil((final_y-ypos)/10);
   ypos=ypos+divisor;
   }
   if(ypos>final_y){
   var divisor=Math.ceil((ypos-final_y)/10);
   ypos=ypos-divisor;
   }
   elem.style.left=xpos+"px";
   elem.style.top=ypos+"px";
   var repeatelem="moveElem('"+elemId+"',"+final_x+","+final_y+","+interval+")";
   elem.movement=setTimeout(repeatelem,interval);
}