动画知识点：setTimeout函数的关系

 

抽象

<div id="slideshow">
<img src="hecheng.png" alt="这是个图片" id="preview" title="合成" id="preview" />
</div>
<script type="text/javascript">
function name(){
var left1=document.getElementsByTagName("a");
var img2=document.getElementById("preview");
img2.style.position="absolute";
img2.style.left="0px";
img2.style.top="0px";
left1[0].onmouseover=function(){
moveElement("preview",-91,0,10)
};
left1[1].onmouseover=function(){
moveElement("preview",-182,0,10)
};
left1[2].onmouseover=function(){
moveElement("preview",-273,0,10)
};
}

function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID))return false;
var elem=document.getElementById(elementID);
var disk=0;
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){xpos++;}
if(xpos>final_x){xpos--;}
if(ypos<final_y){ypos++;}
if(ypos>final_y){ypos--;}*///原始

//改进版本，增加移动速度
if (xpos<final_x) {
disk=Math.ceil((final_x-xpos)/10);//Math.ceil对象是将括号的结果往高的整数方向取整
xpos=xpos+disk;
}
if (xpos>final_x) {
disk=Math.ceil((xpos-final_x)/10);
xpos=xpos-disk;
}
if (ypos<final_y) {
disk=Math.ceil((final_y-ypos)/10);
ypos=ypos+disk;
}
if (ypos>final_y) {
disk=Math.ceil((ypos-final_y)/10);
ypos=ypos-disk;
}

elem.style.left=xpos+"px";
elem.style.top=ypos+"px";
var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement=setTimeout(repeat,interval); }

window.onload=name;
</script>