JS DOM编程艺术——用JS实现动画效果—— JS学习笔记2015-7-22(第89天)

实用的动画效果：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>实用的动画效果</title>

<style>
#slideshow{ width: 100px; height: 100px; position: relative; overflow: hidden;}
#preview { position: absolute;}
</style>

</head>

<body>
<h1>网页设计</h1>
<p>你应该知道事情</p>
<ol id="linklist">
    <li><a href="structure.html">结构</a></li>
    <li><a href="presentation.html">表现</a></li>
    <li><a href="behavior.html">行为</a></li>
</ol>


<script>

    function insertAfter(newElement,targetElement){
             var parent = targetElement.parentNode;
             if(parent.lastChild == targetElement){
                 parent.appendChild(newElement);
             }else{
                 parent.insertBefore(newElement,targetElement.nextSibling);
             }
    }
     
  

    

    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);
       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;
       }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);
   }
    
    function prepareSlideshow(){

        // var preview = document.getElementById('preview');
        // preview.style.position = 'absolute';
        // preview.style.left = '0px';
        // preview.style.top = '0px';

        var slideshow = document.createElement('div');
        slideshow.setAttribute('id','slideshow');
        var preview = document.createElement('img');
        preview.setAttribute('src','img/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);

        var list = document.getElementById('linklist');
        var links = list.getElementsByTagName('a');
        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);
        }
    }
    prepareSlideshow();

</script>
</body>
</html>
View Code
这份文档中，结构层、表示层和行为层，已经分离的比较彻底了。如果禁用了页面中不会出现动画图片。