【DOM编程艺术】实时动画--进一步

if( xpos < final_x){
     xpos ++;   
}

变量xpos是被移动元素的当前左位置，变量final_x是这个元素的目的地的左位置。

不管final_x与xpos的距离多远，它每次只前进一个像素。为了增加趣味性，我们来改变它。

如果那个元素与它的目的地距离较远，就让它每次前进一大步；如果那个元素与它的目的地距离较近，就让它每次前进一小步。

    if(xpos < final_x){
        dist = Math.ceil((final_x - xpos)/10);  //若final_x - xpos 的值小于10的情况下,dist结果将小于1，而我们不可能把一个元素移动不到一个像素的距离。用Math.ceil返回不小于dist的值的一个整数。
        xpos = xpos + dist;
    }

进一步改变后的动画代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Design</title>
<style type="text/css">
#slideshow{width:100px; height:100px; position:relative; overflow:hidden;}
#preview{ position:absolute;}
</style>
</head>

<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>
<div id='slideshow'>             //这三行是为了能够用Javascript代码实现动画效果而存在的标记。可以在js里塞入
    <img src="images/topics.gif"  alt='building blocks of web design' id='preview' />
</div>
<script>
window.onload = prepareSlideshow;
function prepareSlideshow(){
    //确保浏览器理解DOM方法
    if(!document.getElementById) return false;
    if(!document.getElementsByTagName) return false;
    //确保元素存在
    if(!document.getElementById('linklist')) return false;
    //生成html标记
    var slideshow = document.createElement('div');
    slideshow.setAttribute('id','slideshow');
    var preview = document.createElement('img');
    preview.setAttribute('id','preview');
    preview.setAttribute('src','images/topics.gif');    
    preview.setAttribute('alt','building blocks of web design');
    slideshow.appendChild(preview);
    document.body.appendChild(slideshow);
    preview.style.position = 'absolute';
    preview.style.left = '0px';   //可以删掉了
    preview.style.top = '0px';
    var list = document.getElementById('linklist');
//取得列表中所有的链接
    var item = list.getElementsByTagName('a');
    item[0].onmouseover = function(){
          moveElement('preview',-100,0,10);
    }
    item[1].onmouseover = function(){
          moveElement('preview',-200,0,10);
    }
    item[2].onmouseover = function(){
          moveElement('preview',-300,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);
    if(elem.movement){
        console.log('elem.movement:'+elem.movement);  //此时显示的是1，2，3，……29  应该是执行的次数……一直会接着执行下去 30,31……
        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);
    var dist = 0;
    if(xpos == final_x && ypos == final_y){
        return true;
    }
    if(xpos < final_x){
        dist = Math.ceil((final_x - xpos)/10);
        xpos = xpos + dist;
    }
    if(xpos > final_x){
        dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
    }
    if(ypos < final_y){
        dist = Math.ceil((final_y - ypos)/10);
        ypos = ypos + dist;
    }
    if(ypos > final_y){
        dist = Math.ceil((ypos - final_y)/10);
        ypos = ypos - dist;
    }
    console.log('xpos:' + xpos + ' ypos:' + ypos);   //xpos和ypos都是经计算后的值
    elem.style.left = xpos +'px';
    elem.style.top = ypos +'px';
    var repeat="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
    elem.movement=setTimeout(repeat,10);
}

</script>
</body>
</html>

<div id='slideshow'><img src="images/topics.gif"  alt='building blocks of web design' id='preview' />
</div>

如果用户没有启动Javascript支持，以上内容就未免太多余了。这里的div和img元素纯粹是为了动画效果才”塞“进来的。既然如此，与其把这些元素硬编码在文档里，不如用Javacript代码来生成它们。