划过文字图片跟着切换效果代码

很简单,主要是通过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);
}

下面来看完整实例

<style>
#demo #left{width:40%; float:left; margin-left:10%; border-right:1px dashed #363636}
#demo #right{width:40%; float:right;}
#demo h2{font-size:1em; font-weight:normal; color:#a40000; margin-top:20px}
#demo ul li{border-left:5px solid #eee; margin:8px 3px; text-indent:5px; list-style:none; line-height:1.4em; }
#demo ul li a{text-decoration:none; color:#363636;padding:0 5px}
#demo ul li a:hover{background:#eee; color:#006}
#demo p{line-height:2em}
#demo p span{border-bottom:1px dashed #363636; line-height:2em; padding:0 8px; margin-top:900px}
#showplace_a,#showplace_b{width:300px; height:200px; overflow:hidden; margin-left:40px; position:relative; border:5px solid #cff}
#show2010_a,#show2010_b{position:absolute}
</style>

<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<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);
}
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.length; 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.length; 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>

<div id="demo">
<div id="left">
<h2>我是横向动画,uh oh!</h2>
<ul id="lateral2010">
<li><a href="javascript:void(0)">专注前端技术</a></li>
<li><a href="javascript:void(0)">热爱php教程技术</a></li>
<li><a href="javascript:void(0)">崇尚简单的生活</a></li>
<li><a href="javascript:void(0)">执子之手,养家糊口</a></li>
</ul>
<div id="showplace_a"><img src="images/100501a.jpg" id="show2010_a" alt="鼠标划过我会变哦" title="鼠标划过我会变哦"/></div>
<p><span>划过上面的链接,你会看到很酷的效果哦~</span></p>
</div>
<div id="right">
<h2>我是纵向动画,uh oh!</h2>
<ul id="vertical2010">
<li><a href="javascript:void(0)">专注前端技术</a></li>
<li><a href="javascript:void(0)">热爱php技术</a></li>
<li><a href="javascript:void(0)">崇尚简单的生活</a></li>
<li><a href="javascript:void(0)">执子之手,养家糊口</a></li>
</ul>
<div id="showplace_b"><img src="images/100501b.jpg" id="show2010_b" alt="鼠标划过我会变哦" title="鼠标划过我会变哦" /></div>
<p><span>划过上面的链接,你会看到很酷的效果哦~</span></p>
</div>
</div>

补充：网页制作,js教程