javascript之左右缓动动画函数的封装

最新推荐文章于 2021-03-18 20:08:04 发布

persistsss

最新推荐文章于 2021-03-18 20:08:04 发布

阅读量167

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/persistsss/article/details/108245729

版权

js左右缓动动画函数的封装

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="bootstrap-4.4.1.css">
		<style>
			
			.box{
				width: 100px;
				height: 100px;
				background-color: chartreuse;
				position:absolute;
			}
		</style>
	</head>
	<body>

		<button class="btn1">移动400px</button>
		<button class="btn2">移动800px</button>
		<div class="box"></div>
		

		
		
		<script>

			let btn1 = document.querySelector('.btn1');
			let btn2 = document.querySelector('.btn2');
			let box = document.querySelector('.box');

			btn1.onclick = function(){
				animate(box,400);
			}

			btn2.onclick = function(){
				animate(box,800);
			}

			// 缓动动画
			function animate(element,target){
				// 清除定时器
				clearInterval(element.timeId);

				element.timeId = setInterval(function(){
					// 获取元素当前的位置
					let current = element.offsetLeft;
					// 当current越大，step越小，先快后慢
					let step = (target - current) / 10;
					// 当step大于0时，step向上取整，否则，step向下取整
					step = step > 0 ? Math.ceil(step) : Math.floor(step);
					current += step;
					element.style.left = current + 'px';
					// 不用担心到达不了目标位置，因为step最小达到1
					if(current == target){
						clearInterval(element.timeId);
					}
					console.log("目标位置：" + target + "当前位置：" + current + "每次移动的步数：" + step);
				},20);
			}

		</script>
		
	</body>
</html>

效果图

persistsss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之左右缓动动画函数的封装

js缓动动画函数的封装<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bootstrap-4.4.1.css"> <style> .box{ width: 100px; height: 100px; background-color: chartreuse; p
复制链接

扫一扫