最近在看《Javascript Dom编程艺术》,在阅读到第十章“用javascript实现动画效果”时遇到一个问题,思考之后记录在此。
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById(elementID)){
return false;
}
var elem = document.getElementById(elementID);
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++;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat ="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
movement = setTimeout(repeat,interval);
}
当时不理解为什么repeat变量中的elementID,final_x,final_y,interval两边都要加“+”,把“+”去掉之后又实现不了想要的效果,仔细想了想,这是因为setTimeout()函数第一个参数时字符串,所以
var repeat ="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
传入setTimeout()时就变成了这样:
movement("elementID",final_x,final_y,interval)
去掉加号当然行不通了。