JS匀速运动演示示例代码_Javascript教程-查字典教程网
JS匀速运动演示示例代码
JS匀速运动演示示例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:匀速运动演示vartimeIdfunctionstartMove(target){varoDiv=document.get...

复制代码 代码如下:

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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>匀速运动演示</title>

<style type="text/css">

<>

</style>

<script type="text/javascript">

var timeId

function startMove(target){

var oDiv=document.getElementById('grap')

clearInterval(timeId); //这个地方就是为了防止多次点击速度加快的现象,很重要

speed=oDiv.offsetLeft<target?8:-9;

timeId=setInterval(function(){

if(Math.abs(oDiv.offsetLeft-target)<=6){

oDiv.style.left=target+'px'; //只要矩形移动到接近到目标点处就直接移动到目标点上,肉眼无法察觉速度变化

clearInterval(timeId); document.title="目标"+oDiv.style.left;

}

else{

oDiv.style.left=oDiv.offsetLeft+speed+'px';

}

},30);

}

</script>

</head>

<body>

<div id="div1"><span>100px</span></div>

<div id="div2"><span>800px</span></div>

<div id="div3"><span>300px</span></div>

<div id="div4"><span>500px</span></div>

<input type="button" value="移动到100px处"/>

<input type="button" value="移动到300px处"/>

<input type="button" value="移动到500px处"/>

<input type="button" value="移动到800px处"/>

<div id="grap" ></div>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类