javaScript运动框架之匀速运动
运动框架
1.在开始运动时，关闭已有定时器
2.把运动和停止隔开(if/else)
匀速运动的停止条件
运动终止条件：距离足够近
Demo代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>匀速运动</title>
<style>
.sport {
width: 60px;
height: 60px;
background-color: orange;
border-radius: 5px;
position: absolute;
top: 60px;
text-align: center;
line-height: 60px;
} #div1 {
top: 60px;
left: 0;
} #div2 {
top: 150px;
left: 900px;
} #reference {
width: 1px;
height: 260px;
background-color: red;
position: fixed;
top: 20px;
left: 450px;
}
</style>
<script>
function startMove(obj, iTarget) {
let timer = null; //定时器id
let oDiv1 = document.getElementById(obj); clearInterval(timer); //重点注意开启新的定时器前，需要把旧的定时器闭关，否则会产生多个定时器！
timer = setInterval(function () {
let iSpeed = 0;
let l = oDiv1.offsetLeft - iTarget; // l = 运动物体与目标物体之间的距离
iSpeed = l > 0 ? -8 : 8; //判断运动方向
if (Math.abs(l) < iSpeed) { //Math.abs() 绝对值；匀速运动时,当距离l < 速度iSpeed则可以表示运动物体已到达目的地（判断条件）
clearInterval(timer); //闭关定时器
oDiv1.style.left = iTarget + 'px'; // 闭关定时器时可能运动物体只是接近目的地而非完美到达，所以需要手动设置完美抵达目的地！
} else {
oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px'; //运动过程
}
}, 30); }
</script>
</head> <body>
<input type="button" value="开始运动" onclick="startMove('div1',450)" />
<input type="button" value="开始运动" onclick="startMove('div2',450)" />
<div id="div1" class="sport">A</div>
<div id="div2" class="sport">B</div>
<div id="reference"></div>
</body> </html>
效果图1：
效果图2：
javaScript运动框架之匀速运动的更多相关文章
- 好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
- 【repost】JavaScript运动框架之速度时间版本
一.JavaScript运动框架之速度版 1.1 运动框架的实现思路 运动,其实就是在一段时间内改变 left . right . width . height . opactiy 的值,到达目的地之 ...
- javascript运动框架（三）
迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关 ...
- 【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
- javascript运动框架
下面这个一个运动框架可以控制元素在一个属性上的运动,同时,可以调用回调函数. /* 获取元素某个属性的值 @obj: 对象 @attr: 属性值 */ function getStyle(obj, a ...
- JavaScript 运动框架 Step by step（转）
1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样 ...
- JavaScript 运动框架
<script> window.onload=function (){ var oDiv=document.getElementById("div1"); oDiv.o ...
- javascript运动框架（二）
紧接着上面写的... 给div加一个边框,border:1px solid black window.onload = function(){ var div = document.getE ...
- 适用于CSS2的各种运动的javascript运动框架
<script> window.onload = function() { //var oDiv1 = document.getElementById('box1'); //var oDi ...
随机推荐
- ssm框架文件配置
1 简介 Spring MVC (web level),采取 MVC 架构,意图取代麻烦的 Servlet 写法,简化 web 层 MyBatis (dao level),意图取代 jdbc 操作数据 ...
- FusionCharts的属性
FusionCharts 的 XML标签属性有一下四种数据类型 * Boolean - 布尔类型,只能为1或者0.例如:<graph showNames='1′ > * Number - ...
- leetcode-easy-math-13 Roman to Integer
mycode 97.21% class Solution(object): def romanToInt(self, s): """ :type s: str :rty ...
- leetcode 714. 买卖股票的最佳时机含手续费
继承leetcode123以及leetcode309的思路,,但应该也可以写成leetcode 152. 乘积最大子序列的形式 class Solution { public: int maxProf ...
- 函数参数<二>
1. 缺省参数 调用函数时,缺省参数的值如果没有传入,则被认为是默认值.下例会打印默认的age,如果age没有被传入: def printinfo( name, age = 35 ): # 打印任何传 ...
- 使用zipkin2在SpringCloud2.0环境下追踪服务调用情况
1.目的: 使用zipkin2.0在Spring Cloud 2.0环境下,追踪服务调用情况. 2.所需组件: zipkin2.0,Spring Cloud 2.0,Eureka Server,Eur ...
- Oracle常用操作表空间sql脚本
--删除用户(如果用户下面有对象,需要加cascade参数) drop user zxasrs cascade; --修改表空间为离线 alter tablespace zxasrs offline; ...
- TypeError: reduction operation 'argmax' not allowed for this dtype
这个错误真的tmd伤脑筋.我用idxmax函数去求series类型的最大值的索引,结果明明是下面这种数据, 无论我如何pint他的shape,type,他怎么看都是一个满足idxmax函数要求的参数类 ...
- 【VS开发】【图像处理】V4L2 pixel format
目录(?)[-] v4l2_pix_format定义 2 具体Pixel Format定义 1. v4l2_pix_format定义 [cpp] view plain copy /* * V I D ...
- (转)Jenkins2.0 Pipeline 插件执行持续集成发布流程 - git -资料 - 不错的文档
1.Jenkins 2.0 的精髓是 Pipeline as Code Jenkins 2.0 的精髓是 Pipeline as Code,是帮助 Jenkins 实现 CI 到 CD 转变的重要角色 ...