JS缓速动画

最新推荐文章于 2022-08-16 22:33:39 发布
最新推荐文章于 2022-08-16 22:33:39 发布
阅读量297 收藏
点赞数
分类专栏： js 前端 文章标签： javascript js css html dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45060872/article/details/105456013
版权
前端 同时被 2 个专栏收录
62 篇文章 0 订阅
订阅专栏
js
28 篇文章 0 订阅
订阅专栏

缓速动画的封装

function slowMOVE(ele, attrs, callback) {
			//开启新的定时器之前先清除定时器
			clearInterval(ele.timeID);
			//3.开启定时器
			ele.timeID = setInterval(function() {
					/*
					开关思想：
						1.提出假设
						2.验证假设
						3.根据变量的结果做出操作
					*/
					//提出假设
					var isAll = true;
					//验证假设

					//遍历传入的所有属性
					for (var key in attrs) {
						var attr = key;
						var target = attrs[key];

						if (attr == "zIndex"||attr=="backgroundColor") {
							ele.style[attr] = target;
						} else if (attr == "opacity") {
							//3.1.获取元素位置

							//offsetLeft 获取属性值：获取到的只是数字类型的
							//透明度是小数 不适合进行运算 所以扩大100倍
							//透明度是小数，所以使用parseFloat
							var currentLeft = (parseFloat(getEleStyle(ele, attr)))*100;
							//3.2.开始移动（在原本的位置上缓速移动）
							var speed = (target*100 - currentLeft) / 10;
							
							//消除误差
							// if(speed>0){
							// 	speed=Math.ceil(speed);
							// }else{
							// 	speed=Math.floor(speed);
							// }
							speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

							currentLeft += speed;
							//3.3将移动到的当前位置赋值给  box.style.left
							ele.style[attr] = currentLeft/100;

							//4.终点检测
							if (currentLeft != target) {
								isAll = false;
							}
						}else {
						//3.1.获取元素位置

						//offsetLeft 获取属性值：获取到的只是数字类型的
						//而window.getComputedStyle方法获取到的是带单位的字符串
						var currentLeft = parseInt(getEleStyle(ele, attr));
						//3.2.开始移动（在原本的位置上缓速移动）
						var speed = (target - currentLeft) / 10;
						
						//消除误差
						// if(speed>0){
						// 	speed=Math.ceil(speed);
						// }else{
						// 	speed=Math.floor(speed);
						// }
						speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

						currentLeft += speed;
						//3.3将移动到的当前位置赋值给  box.style.left
						ele.style[attr] = currentLeft + "px";

						//4.终点检测
						if (currentLeft != target) {
							isAll = false;
						}
					}
				}
				//根据变量的值，给出结果
				if (isAll) {
					//停止运动:清除定时器
					clearInterval(ele.timeID);
					callback();
				}
			}, 50)
		}

		//IE8兼容
		function getEleStyle(ele, attr) {
			//做浏览器能力检测
			if (window.getComputedStyle) {
				var style = window.getComputedStyle(ele, null);
				return style[attr];
			} else {
				return ele.currentStyle[attr];
			}
		}
	</script>
</html>

在这里插入图片描述
在这里插入图片描述

案例一：360开机动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#father{
				position:fixed;
				bottom: 0;
				right: 0;
			}
			#box1 {
				width: 322px;
				height: 244px;
				background-image: url(img/t.jpg);
				cursor: pointer;
			}


			#box2 {
				width: 322px;
				height: 101px;
				background-image: url(img/b.jpg);
			}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="box1"></div>
			<div id="box2"></div>
		</div>
	</body>
	<script type="text/javascript">
		//获取元素
		var box1 = document.getElementById("box1");
		var box2 = document.getElementById("box2");
		var father=document.getElementById("father")

		box1.onclick = function() {
			slowMOVE(box2, {
				height: 0
			},function() {
				slowMOVE(father, {
					width: 0
				})
			});
		}




	//封装
		function slowMOVE(ele, attrs, callback) {
			//开启新的定时器之前先清除定时器
			clearInterval(ele.timeID);
			//3.开启定时器
			ele.timeID = setInterval(function() {
				/*
				开关思想：
					1.提出假设
					2.验证假设
					3.根据变量的结果做出操作
				*/
				//提出假设
				var isAll = true;
				//验证假设

				//遍历传入的所有属性
				for (var key in attrs) {
					var attr = key;
					var target = attrs[key];

					//3.1.获取元素位置

					//offsetLeft 获取属性值：获取到的只是数字类型的
					//而window.getComputedStyle方法获取到的是带单位的字符串
					var currentLeft = parseInt(getEleStyle(ele, attr));
					//3.2.开始移动（在原本的位置上缓速移动）
					var speed = (target - currentLeft) / 10;
					// if(speed>0){
					// 	speed=Math.ceil(speed);
					// }else{
					// 	speed=Math.floor(speed);
					// }
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

					currentLeft += speed;
					//3.3将移动到的当前位置赋值给  box.style.left
					ele.style[attr] = currentLeft + "px";

					//4.终点检测
					if (currentLeft != target) {
						isAll = false;
					}
				}
				//根据变量的值，给出结果
				if (isAll) {
					//停止运动:清除定时器
					clearInterval(ele.timeID);
					callback();
				}
			}, 50)
		}

		//IE8兼容
		function getEleStyle(ele, attr) {
			//做浏览器能力检测
			if (window.getComputedStyle) {
				var style = window.getComputedStyle(ele, null);
				return style[attr];
			} else {
				return ele.currentStyle[attr];
			}
		}
	</script>
</html>

案例二：旋转木马轮播图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				list-style: none;
				border: 0;
			}
			
			.all {
				width:1100px;
				height: 400px;
				margin:10px auto;
				border: 1px solid #ccc;
				background-color: pink;
			}
			.screen{
				 height:500px;
				 position: relative;
			}
			.screen li{
			    position: absolute;
			    left:200px;
			    top:0;
			}
			#arr span {
				width: 40px;
				height: 40px;
				position: absolute;
				left: 450px;
				top: 40%;
				margin-top: -20px;
				background: #000;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				font-weight: bold;
				font-size: 30px;
				color: #FFFFFF;
				opacity: 0.3;
				border: 1px solid #FFFFFF;
			}
			#arr #right {
				right: 450px;
				left: auto;
			}
		</style>
	</head>
	<body>
		<div class="all" id="box">
		    <div  class="screen">
		        <ul>
		            <li><img src="img/5dd3a06335399.jpg" width="500" height="200"></li>
		            <li><img src="img/5dd3a0650feea.jpg" width="500" height="200"></li>
		            <li><img src="img/5dd3a066a1691.jpg" width="500" height="200"></li>
		            <li><img src="img/5dd641960a309.png" width="500" height="200"></li>
		            <li><img src="img/5dd7864394ae5.jpg" width="500" height="200"></li>
		        </ul>
		    </div>
			<div id="arr">
				<span id="left">&lt;</span>
				<span id="right">&gt;</span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var arr =[
			{//1
			     width: 600,
			     top: 70,
			     left: 0,
			     opacity: 0.2,
			     zIndex: 2
			   },
			   {//2
			     width: 600,
			     top: 70,
			     left: 50,
			     opacity: 0.5,
			     zIndex: 3
			   },
			   {//3
			     width: 800,
			     top: 20,
			     left: 280,
			     opacity: 1,
			     zIndex: 4
			   },
			   {//4
			     width: 600,
			     top: 70,
			     left: 550,
			     opacity: 0.5,
			     zIndex: 3
			   },
			   {//5
			     width: 600,
			     top: 70,
			     left: 600,
			     opacity: 0.2,
			     zIndex: 2
			   }
		]
		 
		var box = document.getElementById("box"); //最外层的大盒子
		var screen = document.getElementsByClassName("screen")[0];
		var ul = screen.children[0]; //获取装着图片的ul
		var liArr=ul.children;
		var Arr = document.getElementById("arr");
		var left = document.getElementById("left");
		var right = document.getElementById("right");
		
		//鼠标移入时左右按钮显示，离开隐藏
		box.onmouseover = function() {
			Arr.style.display = "block";
		
			//鼠标移入box盒子 停止自动轮播
			clearInterval(timeID);
		
		}
		box.onmouseout = function() {
			Arr.style.display = "none";
		
			//鼠标移出box盒子 自动轮播
			timeID = setInterval(function() {
				arr.push(arr.shift());
				 assign();
			}, 2000);
		
		}
		//创建一个isAll变量，开闭原则，为了再点击按钮完成所有样式之后才可以继续点击
		var isAll = true;
		
		//页面加载样式
		for(var i=0;i<liArr.length;i++){
				//遍历 把图片样式赋给图片
				slowMOVE(liArr[i],{
					width:arr[i].width,
		            top:arr[i].top,
		            left:arr[i].left,
		            opacity:arr[i].opacity,
		            zIndex:arr[i].zIndex
				});
			}
		
		//点击上一页下一页  图片轮播
		left.onclick=function(){
				//点击之后将isAll设置为false，这样在这个样式完全显示之前点击按钮没有变化
				isAll = false;
				arr.push(arr.shift());
				assign();
		}
		right.onclick=function(){
				//点击之后将isAll设置为false，这样在这个样式完全显示之前点击按钮没有变化
				isAll = false;
				arr.unshift(arr.pop());
				assign();
		}
		
		
		
		//之后再次给图片设置样式
		function assign() {
			for(var i=0;i<liArr.length;i++){
				slowMOVE(liArr[i],arr[i],function(){
					isAll= true;
				});
			}
		};
		
		
		 //自动切换
		 var timeID=setInterval(function () {
		               arr.push(arr.shift());
		                assign();
		            }, 2000);
		        
		
		
		//封装
		function slowMOVE(ele, attrs, callback) {
			//开启新的定时器之前先清除定时器
			clearInterval(ele.timeID);
			//3.开启定时器
			ele.timeID = setInterval(function() {
				/*
				开关思想：
					1.提出假设
					2.验证假设
					3.根据变量的结果做出操作
				*/
				//提出假设
				var isAll = true;
				//验证假设

				//遍历传入的所有属性
				for (var key in attrs) {
					var attr = key;
					var target = attrs[key];

					if (attr == "zIndex" || attr == "backgroundColor") {
						ele.style[attr] = target;
					} else if (attr == "opacity") {
						//3.1.获取元素位置

						//offsetLeft 获取属性值：获取到的只是数字类型的
						//透明度是小数 不适合进行运算 所以扩大100倍
						//透明度是小数，所以使用parseFloat
						var currentLeft = (parseFloat(getEleStyle(ele, attr))) * 100;
						//3.2.开始移动（在原本的位置上缓速移动）
						var speed = (target * 100 - currentLeft) / 10;

						//消除误差
						// if(speed>0){
						// 	speed=Math.ceil(speed);
						// }else{
						// 	speed=Math.floor(speed);
						// }
						speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

						currentLeft += speed;
						//3.3将移动到的当前位置赋值给  box.style.left
						ele.style[attr] = currentLeft / 100;

						//4.终点检测
						if (currentLeft != target) {
							isAll = false;
						}
					} else {
						//3.1.获取元素位置

						//offsetLeft 获取属性值：获取到的只是数字类型的
						//而window.getComputedStyle方法获取到的是带单位的字符串
						var currentLeft = parseInt(getEleStyle(ele, attr));
						//3.2.开始移动（在原本的位置上缓速移动）
						var speed = (target - currentLeft) / 10;

						//消除误差
						// if(speed>0){
						// 	speed=Math.ceil(speed);
						// }else{
						// 	speed=Math.floor(speed);
						// }
						speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

						currentLeft += speed;
						//3.3将移动到的当前位置赋值给  box.style.left
						ele.style[attr] = currentLeft + "px";

						//4.终点检测
						if (currentLeft != target) {
							isAll = false;
						}
					}
				}
				//根据变量的值，给出结果
				if (isAll) {
					//停止运动:清除定时器
					clearInterval(ele.timeID);
					callback();
				}
			}, 50)
		}

		//IE8兼容
		function getEleStyle(ele, attr) {
			//做浏览器能力检测
			if (window.getComputedStyle) {
				var style = window.getComputedStyle(ele, null);
				return style[attr];
			} else {
				return ele.currentStyle[attr];
			}
		}
	</script>
</html>
头上三尺很有神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js缓速运动
weixin_34161032的博客
10-16 132
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <style> *{margin:0;padding:0;} #w{width:200px;height:200px;background:...
缓速动画封装
qq_42972967的博客
10-25 74
清除历史定时器 获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。对步长进行二次加工(大于0向上取整,小于0项下取整)动画原理： 目标位置 = 当前位置 + 步长，检测缓动动画有没有停止直接移动指定位置 ...
获取全部样式-`getComputedStyle`/JS缓动动画/缓动动画函数封装/淡入淡出效果
不懂帕斯的博客
04-26 170
01-获取全部样式-getComputedStyle <style> .box { position: absolute; left: 0; width: 100px; height: 100px; background-color: red; } </style> </head> <body&g
JavaScript - WebAPI - 定时器/延时器/匀速动画/getElementStyle获取全部样式/缓速动画及缓速动画函数封装
Henry_ID的博客
08-14 198
定时器作用及语法 1.1-setInterval 定时器 定时器：某一件事（一段代码）并不是马上执行，而是隔一段时间执行 setInterval:创建定时器 特点：一旦创建立即计时，必须要手动停止，否则会无限的每隔一段时间执行代码 clearInterval(定时器id)：清除定时器 一个页面可以创建很多个定时器，通过制定定时器id可以清除特定的定时器 <!DOCTYPE html> <html lang="en"> <head>
保姆式原生Js简单轮播图+缓速动画封装教程
weixin_47886687的博客
08-26 341
轮播图的原理： 一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。 HTML布局 父容器box存放所有内容,子容器screen存放图片,current存放按钮序号. left/right做移入出现箭头,点击左右滑动图片效果 <div class="all" id='box'> <div class="screen"> <ul>
基于FPGA的电涡流缓速器控制系统
01-19
　关键词：电涡流缓速器;FPGA;状态机;模糊控制 　引言 　电涡流缓速器的工作原理基于电磁感应理论。作为一种辅助制动装置，其减少了主制动装置的机械摩擦，既提高了寿命，又提高了车辆行驶的安全性、经济性和舒适...
关于汽车基础功能-缓速制动的介绍
最新发布
01-18
【分类】汽车缓速器主要有五种类型：发动机缓速装置、液力缓速器、电涡轮缓速器、电机缓速装置和空气动力缓速装置。其中，电机缓速装置是通过电动车的电机进行制动能量回收来实施缓速制动，这是本文主要讨论的内容。...
汽车液力缓速器的原理及应用
01-20
液力缓速器作为一种车辆辅助制动系统，在现代重型运输车辆中扮演着越来越重要的角色。由于传统的摩擦片式制动装置在长时间、高强度的工作条件下容易出现热衰退，导致制动效能下降，甚至制动失效，这严重威胁到行车...
蓄能式气压缓速器在无轨胶轮车上的应用研究
07-03
【蓄能式气压缓速器的工作原理】 蓄能式气压缓速器是一种用于车辆制动的装置，它利用气体的压力能来储存能量并在需要时释放，从而提供额外的制动力。该缓速器主要由气体储罐（蓄能器）、控制系统和执行机构等部分...
客车缓速器工作原理.docx
03-01
【客车缓速器】是车辆制动系统中的一个重要组成部分，尤其在大型客车中，它能有效提升行车安全性。缓速器的主要功能是在车辆需要减速或保持稳定速度时提供辅助制动，减轻常规机械制动系统的负担，避免因频繁使用刹车...
js仿360开机效果
10-15
主要为大家详细介绍了js仿360开机效果，并且封装一个带回调函数的缓动动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js仿360开机启动右下角关闭浮动层效果.zip
07-05
js关闭浮动层，360开机启动浮动层效果。
JavaScript动画缓冲算法总结 转
weixin_30760895的博客
07-26 132
/** * 以下是各种缓动公式算法 * t: current time（当前时间）； * b: beginning value（初始值）； * c: change in value（变化量）； * d: duration（持续时间） */ var Easing = { Linear: function(t,b,c,d){ return c*t/d + b; }, Quad: { ...
Javascript原生代码——动画封装：匀速、缓速及升级
cindy647的博客
07-09 896
在web网页设计中，经常要使用到动画（如轮播图、随滚动窗口移动的广告栏等等），封装动画会节省很多代码，也让结构更简单清晰。这里先封装了一个匀速移动的动画和一个缓速移动的动画（通过offsetLeft/offsetTop来左右上下移动），然后逐渐深入下去。 匀速动画 ele为要移动的盒子，target为目标位置（像素），spd为计数器的频率 function animate1(el...
js的缓动动画
qq_61706112的博客
02-15 673
一、匀速动画 <body> <button>点击移动</button> <div></div> <script> var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.addEventListener('click', function()
案例：原生JS实现360开机动画
zhw13260525048的博客
11-11 1081
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .box { width: 322px; positio
js实现轮播图自动轮播
weixin_47619284的博客
08-16 9703
js实现轮播图自动轮播
360开机动画
xyw_jzj5201314的博客
11-11 1120
360开机动画 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 322px; position: fixed; bottom: 0; r
详解汽车缓速制动：原理、标准与控制策略
缓速制动的分类依据其工作原理，主要有发动机缓速装置、液力缓速器、电涡轮缓速器、电机缓速装置以及空气动力缓速装置等。本文重点介绍的是电机缓速装置，它通过电机的制动能量回收来实现缓速制动，例如4x2电机中央...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值