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

快来打我* 2022-01-06 06:23 155阅读 0赞

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>

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

转载于:https://www.cnblogs.com/positive/p/3683152.html