js运动技术--缓冲运动

￡神魔★判官ぃ 2024-02-17 23:11 41阅读 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 条评论，41人围观）

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

相关阅读

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

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

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

相关 JS之运动框架

一、匀速运动框架 1.设置元素为绝对定位，left、top才有效 <style> div1{width:100px;height:200px;b

朴灿烈づ我的快乐病毒、/ 2022年08月22日 00:02/ 0 赞/ 157 阅读

相关 JavaScript动画篇之缓冲运动

今天我来谈谈JS中的动画课题，无可厚非，这是一个很酷的话题。想一想，当我们讨论完了这节，我们就可以做出漂亮的渐变动画，包括透明度的设置首先，我们来看看动画的基础

系统管理员/ 2022年08月21日 07:42/ 0 赞/ 172 阅读

相关 JS运动基础框架

JS运动基础框架 1 注意：在开始运动时关闭已有的定时器 2 注意：把运动和停止隔开 <!DOCTYPE html> <html>

你的名字/ 2022年08月07日 02:49/ 0 赞/ 180 阅读

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

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

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

相关缓冲运动

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

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

相关 JS中的运动

本文给大家分享的是个人在学习js运动动画的过程中总结的我们需要注意的8个知识点，分别是速度动画、透明度渐变、缓冲运动、多物体运动、获取样式、任意属性值、链式运动和同时运动，非常

叁歲伎倆/ 2022年07月13日 08:21/ 0 赞/ 122 阅读

相关 js 缓冲运动效果

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

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

相关 js中的运动

1 简单运动(匀速) box{ width: 100px; height: 100px; background-col

悠悠/ 2022年01月11日 09:21/ 0 赞/ 201 阅读

相关 js运动框架

参照网上写了一个运动框架支持对象的width,height,left,top...，透明度动画效果 // 对一个对象的多个属性实现动画 functio

╰半橙微兮°/ 2021年12月24日 06:55/ 0 赞/ 262 阅读