一个简单的纵横向动画效果类

2024-04-27 14:38:32

字体：大中小

来源：转载

供稿：网友

分享一个简易的动画效果类,思路源于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);
}

上一篇：jQuery实现同一点击,两个不同链接,指向两个不同的iframe

下一篇：两种简单实现菜单高亮显示的JS类