JS-匀速运动-运动停止

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>匀速运动停止条件</title><style type="text/css">a{display: block;}input[type='button']{margin-top: 5px;}.div {width: 100px;height: 100px;background-color: red;position: absolute;left: 0;top: 200px;cursor: pointer;}.div2{width: 1px;height: 1200px;position: absolute;left: 300px;top: 0;background-color: blueviolet;/*用这个标杆，发现div1并没有走到300的准确位置，原因是？*/}.div3{width: 1px;height: 1200px;position: absolute;left: 100px;top: 0;background-color: blueviolet;/*用这个标杆，发现div1并没有走到300的准确位置，原因是？*/}</style><script type="text/javascript">window.onload = function(){var oBtn = document.getElementById('btn');var oBtn2 = document.getElementById('btn2');oBtn.onclick = function(){start(100);}oBtn2.onclick = function(){start(300);}}var timer = null;function start(iTarget){var oDiv = document.getElementById('div');clearInterval(timer);timer = setInterval(function(){var speed = 0;if(oDiv.offsetLeft<iTarget){speed = 7;}else{speed = -7;}//这种个情况就是速度不能被整除的时候会出现的问题。//思路就像到一个地方下车，距离近了就算到了，不一定分要撞到墙上才算到了。
//                ?解决方法:Math.abs()：绝对值,一个数，正负号都取正值if(Math.abs(iTarget-oDiv.offsetLeft)<=7){clearInterval(timer);//oDiv.style.left = iTarget;//最后忘了加px,所以还是有点距离有点问题。
                    oDiv.style.left = iTarget+'px';}else{oDiv.style.left = oDiv.offsetLeft+speed+'px';document.title = oDiv.offsetLeft+','+speed;}},30);}</script></head><body><input type="button" value="到100" id="btn" /><input type="button" value="到300" id="btn2" /><div class="div" id="div"></div><div class="div2"></div><div class="div3"></div></body></html>

智能社的开发教程：原址：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc

转载于:https://www.cnblogs.com/padding1015/p/6403533.html

JS-匀速运动-运动停止相关推荐

JS完美运动框架详解——原理分析及demo
1.运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.还有一个很重要的前提是,运动的物体必须是绝对 ...
浅谈工业机器人的运动停止
德系的工业机器人系统中,对于机器人停止运动,定义了3种模式,比如 KUKA 的工业机器人分别定义了 Stop 0 ,Stop 1,Stop 2 (*注1).这种定义模式是与机器人的机械结构和电气结构相 ...
JS匀速运动案例01
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
利用p5.js进行“运动”主题的绘画创作
利用p5.js进行"运动"主题的绘画创作主题用码绘和手绘两种方式创作"运动"主题的作品,对比二者在表现"动态"方面的异同. 码绘工具 ...
p5.js的“运动”主题创作
用p5.js 进行"运动"主题创作第四维即时间(根据爱因斯坦相对论),在时间上的重复,在传统静态绘画中是不可能实现的,但用编程就可以做到. 在各种自媒体平台上,我们会看到很多会& ...
js浮动运动函数html,JS+CSS动态绘制元素曲线运动轨迹(数学函数)
相信许多小伙伴都想知道CSS+JS如何实现物体的曲线运动吧! 其实原理就是运用数学用的函数公式,本文运用的是sin函数上进行的基础变形. 今天的主要目标就是让这张图的里足球运动起来. 首先肯定要先把这 ...
原生JS封装运动框架。
//获取非行内样式function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return ...
原生js之运动函数的封装
//运动函数 function startMove(obj,json,callback){ //{width:3,height:300}clearInterval( obj.timer );obj.t ...
js setInterval 启用停止
以下面例子为说明: <title></title><script src="Scripts/jquery-1.4.1-vsdoc.js" type=& ...

JS-匀速运动-运动停止

JS-匀速运动-运动停止相关推荐

最新文章

热门文章