【www.gdgbn.com--浏览器】

很简单,主要是通过settimeout()方法 ,并利用css教程绝对定位来以改变图片位置以实现动画效果.纯dom方式编写,兼容所有支持网页特效的浏览器及其他api

//@mr.think---简易动画类
function moveelem(elemid, final_x, final_y, interval){
    if (!document.getelementbyid)
        return false;
    if (!document.getelementbyid(elemid))
        return false;
    var elem = document.getelementbyid(elemid);
    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 && ypos == final_y)
        return true;
    if (xpos < final_x) {
        var divisor = math.ceil((final_x - xpos) / 10);
        xpos = xpos + divisor;
    }
    if (xpos > final_x) {
        var divisor = math.ceil((xpos - final_x) / 10);
        xpos = xpos - divisor;
    }
    if (ypos < final_y) {
        var divisor = math.ceil((final_y - ypos) / 10);
        ypos = ypos + divisor;
    }
    if (ypos > final_y) {
        var divisor = math.ceil((ypos - final_y) / 10);
        ypos = ypos - divisor;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeatelem = "moveelem("" + elemid + ""," + final_x + "," + final_y + "," + interval + ")";
    elem.movement = settimeout(repeatelem, interval);
}

下面来看完整实例

<script>
//@mr.think---公用加载类
function addloadevent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != "function") {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function moveelem(elemid,final_x,final_y,interval){
 if (!document.getelementbyid) return false;
 if (!document.getelementbyid(elemid)) return false;
 var elem=document.getelementbyid(elemid);
 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&&ypos==final_y) return true;
 if(xpos   var divisor=math.ceil((final_x-xpos)/10);
  xpos=xpos+divisor;
 }
 if(xpos>final_x){
   var divisor=math.ceil((xpos-final_x)/10);
   xpos=xpos-divisor;
 }
 if(ypos   var divisor=math.ceil((final_y-ypos)/10);
  ypos=ypos+divisor;
 }
 if(ypos>final_y){
  var divisor=math.ceil((ypos-final_y)/10);
  ypos=ypos-divisor;
 }
 elem.style.left=xpos+"px";
 elem.style.top=ypos+"px";
 var repeatelem="moveelem(""+elemid+"","+final_x+","+final_y+","+interval+")";
 elem.movement=settimeout(repeatelem,interval); 
}
function move2010(){
 if(!document.getelementsbytagname) return false;
 if(!document.getelementbyid) return false;
 if(!document.getelementbyid("lateral2010")) return false;
 if(!document.getelementbyid("vertical2010")) return false;
 //左右滚动
 var lateral2010=document.getelementbyid("lateral2010");
 var link_a=lateral2010.getelementsbytagname("a");
 for(var i=0; i   link_a[0].onmouseo教程ver=function(){
   moveelem("show2010_a",-300,0,10);
  }
  link_a[1].onmouseover=function(){
   moveelem("show2010_a",-600,0,10);
  }
  link_a[2].onmouseover=function(){
   moveelem("show2010_a",-900,0,10);
  }
  link_a[3].onmouseover=function(){
   moveelem("show2010_a",0,0,10);
  }
 }
 //上下滚动
 var vertical2010=document.getelementbyid("vertical2010");
 var link_b=vertical2010.getelementsbytagname("a");
 for(var m=0; m   link_b[0].onmouseover=function(){
   moveelem("show2010_b",0,-200,3);
  }
  link_b[1].onmouseover=function(){
   moveelem("show2010_b",0,-400,3);
  }
  link_b[2].onmouseover=function(){
   moveelem("show2010_b",0,-600,3);
  }
  link_b[3].onmouseover=function(){
   moveelem("show2010_b",0,0,3);
  }
 }
}
addloadevent(move2010);
</script>

我是横向动画,uh oh!

  专注前端技术
  热爱php教程技术
  崇尚简单的生活
  执子之手,养家糊口




划过上面的链接,你会看到很酷的效果哦~






我是纵向动画,uh oh!




  专注前端技术
  热爱php技术
  崇尚简单的生活
  执子之手,养家糊口




划过上面的链接,你会看到很酷的效果哦~

本文来源：http://www.gdgbn.com/bangongshuma/29757/