匀速运动的效果想必大家都有见到过吧,在本文为大家介绍下使用 JS 是如何实现的,感兴趣的朋友不要错过
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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">
- <!-- #div1 {width:1px;height:200px;background-color: black;position:absolute;left:100px;top:70px;float:left}
- #div1 span {position:absolute;top:-15px} #div2 {width:1px;height:200px;background-color:midnightblue;position:absolute;left:800px;top:70px;float:
- left} #div2 span {position:absolute;top:-15px} #div3 {width:1px;height:200px;background-color:fuchsia;position:absolute;left:300px;top:70px;float:
- left} #div3 span {position:absolute;top:-15px} #div4 {width:1px;height:200px;background-color:darkmagenta;position:absolute;left:500px;top:70px;float:
- left} #div4 span {position:absolute;top:-15px} #grap {width:200px;height:200px;background:red;position:absolute;left:300px;top:74px;float:
- left;} input {width:100px;margin-left: 90px;} -->
- </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处" onclick="startMove(100)" />
- <input type="button" value="移动到300px处" onclick="startMove(300)" />
- <input type="button" value="移动到500px处" onclick="startMove(500)" />
- <input type="button" value="移动到800px处" onclick="startMove(800)" />
- <div id="grap">
- </div>
- </body>
- </html>
来源: