点击按钮移动DIV

史上最难读懂的一个人 2013-05-22 11:45:11

<!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控件才能运行，在谷歌浏览器根本运行不起来。
求兼容谷歌浏览器的修改方法。

...全文

304 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

魔术世界中文版 2013-05-22

打赏
举报


<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>