求JS滑动效果！

有一个div我希望鼠标经过它的时候，慢慢的移动位置，从右到左移动 100px但是不是突然变换位置的，而是一步一步慢慢滑动过来的。有这样的JS吗？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这个很正常的代码到处都是。
onmouseover时触发事件
然后利用setTimeout改变div的位置。
那个速度你自己控制呗 setTimeout后面的那个参数是毫秒。
<div id="d" style="width:100px;height:30px;background:#111;position:absolute;left:0px;" onmouseover="over();"></div>
<script type="text/javascript">
   var ol,tm,obj,firstl;
  function move(){
       if(!obj) obj = document.getElementById("d");
         if(parseInt(obj.style.left) - firstl >=100){ clearInterval(tm);return ;}
        ol = parseInt(obj.style.left);
  obj.style.left = ++ol + "px";

   }
   function over(){
           firstl = parseInt(document.getElementById("d").style.left);
          tm = setInterval(move, 10);
     }
</script>
这个我刚好有个例子，给lz看看
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery-animate</title>
<script type="text/javascript" src="jquery-1.3.2.min.js" ></script>
<script>
$(function(){
$("#panel1").mouseover(function(){
//if(!$(this).is(":animated")){
$(this).animate({left:"800px",height:"0px"},1000).animate({left:"0px",height:"100px"},4000);
//}
//if(!$("#panel2").is(":animated")){
$("#panel2").animate({left:"800px",height:"200px"},2000).animate({left:"0px",height:"100px"},3000);
$("#panel3").animate({left:"800px",height:"0px"},3000).animate({left:"0px",height:"100px"},2000);
$("#panel4").animate({left:"800px",height:"200px"},4000).animate({left:"0px",height:"100px"},1000);
$("#panel5").animate({left:"800px",height:"0px"},3000).animate({left:"0px",height:"100px"},2000);
$("#panel6").animate({left:"800px",height:"200px"},2000).animate({left:"0px",height:"100px"},3000);
$("#panel7").animate({left:"800px",height:"0px"},1000).animate({left:"0px",height:"100px"},4000);
//}
});

})

</script>
<style>
body{ overflow: hidden}
.panel{

position:relative;
width:200px;
height:100px;
border:1px solid #0050D0;
background:#96e555;
cursor:pointer;
}
</style></head><body>
<div id="panel1" class="panel"></div>
<div id="panel2" class="panel"></div>
<div id="panel3" class="panel"></div>
<div id="panel4" class="panel"></div>
<div id="panel5" class="panel"></div>
<div id="panel6" class="panel"></div>
<div id="panel7" class="panel"></div></body>
</html>
.animate  这个动画，平滑度还是不错的
直接用jQuery吧，，一个函数就搞定了，还能调整各种效果