41、JavaScript的运动----运动的终止条件

ゝ一世哀愁。 2022-09-21 13:09 163阅读 0赞

1、运动终止条件

• 匀速运动：距离足够近

• 缓冲运动：两点重合  (具体上面的一个博客的内容)

2、匀速运动终止的条件

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			#div1 {
    				width: 100px;
    				height: 100px;
    				position: absolute;
    				background: red;
    				left: 0;
    				top: 50px;
    			}
    		</style>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>无标题文档</title>
    		<script type="text/javascript">
    			var timer = null;
    
    			function startMove(iTarget) {
    				var oDiv = document.getElementById('div1');
    				clearInterval(timer);
    				timer = setInterval(function() {
    					var iSpeed = 0;
    					if (oDiv.offsetLeft < iTarget) {
    						iSpeed = 7;
    					} else {
    						iSpeed = -7;
    					}
    					if (Math.abs(oDiv.offsetLeft - iTarget) < 7) //是否到达终点
    					{
    						clearInterval(timer); //到达终点
    						oDiv.style.left = iTarget + 'px';
    					} else {
    						oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'; //到达之前
    					}
    				}, 30);
    			}
    		</script>
    	</head>
    
    	<body>
    		<input type="button" value="开始运动" οnclick="startMove(300)" />
    		<div id="div1"></div>
    		<span style="width:1px; height:300px; background:black; position:absolute; left:300px; top:0;"></span>
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 48、JavaScript的运动----无缝运动的实现

1、JavaScript的运动----无缝运动的实现 2、测试代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

蔚落/ 2022年09月22日 04:58/ 0 赞/ 148 阅读

相关 46、JavaScript的运动----完美运动框架的实现----注意运动停止的判断的技巧

1、完美运动框架多个值同时变化 • setStyle同时设置多个属性 – 参数传递 » Json的使用

痛定思痛。/ 2022年09月22日 04:58/ 0 赞/ 165 阅读

相关 44、JavaScript的运动----任意属性值的运动---应用

1、利用任意属性值的运动的例子 2、测试代码 <head> <meta charset="UTF-8"> <title>任意值运动框架</t

灰太狼/ 2022年09月22日 04:58/ 0 赞/ 155 阅读

相关 42、JavaScript的运动----多个物体同时运动

1、多个物体同时运动 ---例子：多个Div，鼠标移入变宽单定时器，存在问题每个Div一个定时器 2、多物体运动框架定

ゞ浴缸里的玫瑰/ 2022年09月21日 14:26/ 0 赞/ 262 阅读

相关 43、JavaScript的运动----任意属性值的运动---透明度的改变

1、offset属性的Bug • 有边框的Div变宽 –用currentStyle代替offset 2、原有运动框架的问题

阳光穿透心脏的1/2处/ 2022年09月21日 14:26/ 0 赞/ 192 阅读

相关 41、JavaScript的运动----运动的终止条件

1、运动终止条件 • 匀速运动：距离足够近 • 缓冲运动：两点重合 (具体上面的一个博客的内容) 2、匀速运动终止的条件 <!DOCTY

ゝ一世哀愁。/ 2022年09月21日 13:09/ 0 赞/ 164 阅读

相关 40、JavaScript的运动----缓冲运动

1、缓冲运动 • 逐渐变慢，最后停止 • 距离越远速度越大 – 速度由距离决定 – 速度 = (目标值 \- 当前值 ) / 缩放系数

曾经终败给现在/ 2022年09月21日 13:07/ 0 赞/ 199 阅读

相关 37、JavaScript的运动-----匀速运动

1、运动基础 • 让Div运动起来 • 速度——物体运动的快慢 • 运动中的Bug – 不会停止

布满荆棘的人生/ 2022年09月21日 13:05/ 0 赞/ 179 阅读

相关 Javascript运动概念2——多物体运动框架

1、多个物体同时运动例子：多个div，鼠标移入变宽 Bug——单定时器，存在问题解决办法：将每个div一个定时器 2、多物体运动运动框架（1）

古城微笑少年丶/ 2022年07月15日 12:08/ 0 赞/ 183 阅读

相关 Javascript运动概念1——缓冲运动、匀速运动、运动框架

概念—— A、运动基础：（1）让div运动起来（2）速度——物体运动的快慢（3）运动中的Bug a、不会停止 b、速度取某些值会无法停止 c、到达位置后再点

以你之姓@/ 2022年07月15日 12:07/ 0 赞/ 218 阅读