html部分
<body>
<h1>Web Design</h1>
<p>These are the things you should know.</p>
<ol id="linklist">
<li>
<a href="structure.html">Structure</a>
</li>
<li>
<a href="presentation.html">Presentation</a>
</li>
<li>
<a href="behavior.html">Behavior</a>
</li>
</ol>
</body>
js部分
function prepareSlideshow() {
var slideshow = document.createElement("div");
slideshow.setAttribute("id","slideshow");
var preview = document.createElement("img");
preview.setAttribute("src","topics.gif");
preview.setAttribute("alt","building blocks of web design");
preview.setAttribute("id","preview");
slideshow.appendChild(preview);
var list = document.getElementById("linklist");
insertAfter(slideshow,list);//一个将slideshow放在list的方法
// Get all the links in the list
var links = list.getElementsByTagName("a");
// Attach the animation behavior to the mouseover event
links[0].onmouseover = function() {
moveElement("preview",-100,0,10);
}
links[1].onmouseover = function() {
moveElement("preview",-200,0,10);
}
links[2].onmouseover = function() {
moveElement("preview",-300,0,10);
}
}
addLoadEvent(prepareSlideshow);运行函数的方法
function moveElement(elementID,final_x,final_y,interval) {
var elem = document.getElementById(elementID);
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) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
这是javascript-dom编程艺术第十章的代码
我有三个地方不明白
第一、为什么不能删去 if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
_ elem.style.top = "0px";_
}中的 if (!elem.style.left) {} 和 if (!elem.style.top) { }，删去后不知为什么图片就不会
平移了。
第二、 为什么删去_if (elem.movement) {
clearTimeout(elem.movement);_
_ }_这个代码后图片也不会平移了，
第三、为什么 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
我改成elem.movement = setTimeout moveElement(elementID,final_x,final_y,interval),interval);
后图片平移的时间消失了，没有图片平移的动画了
