点击按钮移动DIV

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>点击按钮让DIV层弹性移动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#div1{
background: #FFCC66;
border:#FF6600 1px solid;
height:100px;
width:100px;
position:relative;
left:0px;
}
</style>
<script type="text/javascript">
 var t=null;
 
 function startMove()
 {
  if(t)
  {
   clearInterval(t);
  }
  t=setInterval(move, 30);
 }
 var step=0;
 function move()
 {
  var odiv=document.getElementById("div1");
   step+=(100-odiv.offsetLeft)/50;
   step=step*0.98
 
  odiv.style.left=odiv.offsetLeft+step;
  
 }
</script>
</head>
<body>
<div id="div1">
</div>
<input type="button" value="移动" onclick="startMove()"/>
</body>
</html>
如code标题，这段代码在IE里要允许运行ActiveX控件才能运行，在谷歌浏览器根本运行不起来。
求兼容谷歌浏览器的修改方法。移动DIV兼容谷歌浏览器

解决方案 »

  1.   

    odiv.style.left=odiv.offsetLeft+step + 'px';
      

  2.   


    <style type="text/css">
    #div1{
    background: #FFCC66;
    border:#FF6600 1px solid;
    height:100px;
    width:100px;
    position:relative;
    left:0px;
    }
    </style>
    <script type="text/javascript">
     var t=null;
     
     function startMove()
     {
      if(t)
      {
       clearInterval(t);
      }
      t=setInterval(move, 30);
     }
     
     var step=0;
     function move()
     {
      var odiv=document.getElementById("div1");
       step+=(100-odiv.offsetLeft)/50;
       step*=0.98;
     
      odiv.style.left=odiv.offsetLeft+step+"px";
      
     }
    </script>
    </head>
    <body>
    <div id="div1">
    </div>
    <input type="button" value="移动" onclick="startMove()"/>
    </body>
    </html>
      

  3.   

    jquery是不是弄这个是不是简单点