js运动技术--缓冲运动

￡神魔★判官ぃ 2024-02-17 23:11 59阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1{height: 200px;width: 200px;background: red;position: absolute;top: 50px;left: 0px;}
    			#div2{height: 600px;width: 1px;background: black;position: absolute;left: 300px;}
    		</style> 
    		
    		<script>
    			window.onclick = function(){
    			    startMove();	
    			}
    			
    			function startMove(){
    				var oDiv = document.getElementById("div1");
    				var oBtn = document.getElementById("btn1");
    				
    				oBtn.onclick = function(){
                       setInterval(function(){
    					var speed = (300 - oDiv.offsetLeft)/10;
    					
    					speed = speed>0?Math.ceil(speed):Math.floor(speed); //向上取整，向下取整
    					
    					oDiv.style.left = oDiv.offsetLeft + speed + 'px';                   	
                       },30);
    				}
    				
    			}
    		</script>
    	</head>
    	<body>
    		<input id = "btn1" type = "button" value="开始运动"/>
    		<div id = "div1"></div>
    		<div id = "div2"></div>
    	</body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 js运动技术--完美运动框架

运用JSON传递参数： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

淡淡的烟草味﹌/ 2024年02月17日 23:20/ 0 赞/ 93 阅读

相关 js运动技术--链式运动框架

其原理是函数startMove多了一个参数，这个参数是一个函数，可以在定时器结束时调用。 <!DOCTYPE html> <html> <head>

你的名字/ 2024年02月17日 23:20/ 0 赞/ 68 阅读

相关 js运动技术--多物体同时运动

注意：每个物体需要单独使用一个定时器样例1：多个div变宽 <!DOCTYPE html> <html> <head> <me

た入场券/ 2024年02月17日 23:17/ 0 赞/ 63 阅读

相关 js运动技术--缓冲运动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

￡神魔★判官ぃ/ 2024年02月17日 23:11/ 0 赞/ 60 阅读

相关 js运动技术

1、“分享栏”： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

一时失言乱红尘/ 2024年02月17日 23:10/ 0 赞/ 58 阅读

相关 js运动技术--匀速运动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

- 日理万妓/ 2024年02月17日 23:09/ 0 赞/ 70 阅读

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

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

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

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

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

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

相关缓冲运动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

╰半橙微兮°/ 2022年07月14日 11:19/ 0 赞/ 208 阅读

相关 js 缓冲运动效果

缓冲需要用到数值取整，向上取整:Math.ceil() 向下取整Math.floor() 移动的速度慢慢减慢的效果，移动速度=(终点位置 - 当前位置) / 一个数

灰太狼/ 2022年06月13日 22:45/ 0 赞/ 183 阅读