分享一個簡易的動畫效果類,思路源於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);
}