用JavaScript实现动画效果

1.让两个元素动起来
message.html

Whee!
Whoa!

addLoadEvent.js

function addLoadEvent(func){
     var oldonload=window.onload;
     if(typeof window.onload!='function'){
         window.onload=func;
         }else{
             window.onload=function(){
                 oldonload();
                 func();
                 }
             }
    }

positionMessage.js

function positionMessage(){
    if(!document.getElementById)return false;
    if(!document.getElementById("message"))return false;    //检查兼容性
    var elem=document.getElementById("message");          //找到元素
    elem.style.position="absolute";
    elem.style.left="50px";
    elem.style.top="100px";                                  //设置初值
    moveElement("message",125,25,20);           //调用函数
    if(!document.getElementById)return false;
    if(!document.getElementById("message2"))return false;    //检查兼容性
    var elem=document.getElementById("message2");          //找到元素
    elem.style.position="absolute";
    elem.style.left="50px";
    elem.style.top="50px";                                  //设置初值
    moveElement("message2",125,125,20);   
    }
    addLoadEvent(positionMessage);

moveElement.js

function moveElement(elementID,final_x,final_y,interval){
    if(!document.getElementById)return false;
    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(xposfinal_x){
        xpos--;
        }
    if(yposfinal_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);            //重复执行函数
    }

image.png

image.png

2.有一系列链接的网页，当用户把鼠标悬停在其中的某个链接上时，只显示大图片的一部分
list.html

Web Design
These are the things you should know.

  

    Structure
  
  

    Presentation
  
  

    Behavior
  

layout.css

#slideshow{
      width:100px;
      heigh:100px;
      position:relative;
    }
#preview{
      position:absolute;    
    }

prepareSlideshow.js

function prepareSlideshow(){
     if(!document.getElementsByTagName)return false;
     if(!document.getElementById)return false;     //确保浏览器支持DOM方法
     if(!document.getElementById("linklist"))return false;
     
     var slideshow=document.createElement("div");  //创建div元素
     slideshow.setAttribute("id","slideshow");   
     
     var preview=document.createElement("img");    //创建img元素
     preview.setAttribute("src","images/微信图片_20171113204827.jpg");
     preview.setAttribute("alt","building blocks of web design");
     preview.setAttribute("id","preview");
     
     slideshow.appendChild(preview);     //img放入div中
     var list=document.getElementById("linklist");
     insertAfter(slideshow,list);
     //if(!document.getElementById("preview"))return false;    //确保元素存在
     //var preview=document.getElementById("preview");
     //preview.style.position="absolute";      //找到图片ID
    // preview.style.left="0px";
    // preview.style.top="0px";     //设置图片初始位置（在容器中）
     var list=document.getElementById("linklist");   //找到链接ID
     var links=list.getElementsByTagName("a");    //找到链接
     links[0].onmouseover=function(){               //为mouseover事件添加动画效果
          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);

改进后的moveElement.js

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){                       //movement是elem元素的属性，存在即使用clearTimeout函数
         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(xposfinal_x){
             dist=Math.ceil((xpos-final_x)/10);
             xpos=xpos-dist;
            }
            if(ypos

运用了图片库的insertAfter函数：
insertAfter.js

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

image.png

image.png