<!DOCTYPE html> <head> <title>untitled</title> <meta charset="utf-8" /> <style>*{margin:0;padding:0;} #odiv{ width:100px; height:200px; background-color:#CD3278; position:absolute; top:50px; left:-100px; } #more{ font-family:"微软雅黑"; color:white; width:60px; height:30px; background-color: #669933; position:absolute; top:85px; left:100px; text-align: center; line-height: 30px; }</style> <script type="text/javascript">var odiv=document.getElementById("odiv"); window.οnlοad=function(){ var odiv=document.getElementById("odiv"); odiv.οnmοuseοver=function(){ move(0); } odiv.οnmοuseοut=function(){ move(-100); } } var timer=null; function move(target){ clearInterval(timer); var odiv=document.getElementById("odiv"); timer=setInterval(function(){ var speed=0; if(odiv.offsetLeft>target){ speed=-5; } else{ speed=5; } if(odiv.offsetLeft==target){ clearInterval(timer); } else{ odiv.style.left=odiv.offsetLeft+speed+'px'; } },20); }</script> </head> <body> <div id="odiv"><span id="more">更多</span></div> </body>