深度讲解链式运动框架

Mr.ZKH

于 2019-08-28 17:27:47 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/weixin_44415461/article/details/100123520

版权

在改变单⼀任意值运动框架添加⼀个回调函数参数

链式运动顾名思义就是先运动完⼀个值再运动另⼀个

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>深度讲解链式运动框架</title>
	<style type="text/css">
		#div1,div{
			width:100px;
			height:100px;
			background:red;
			float:left;
			margin-right:50px;
		}
	</style>
</head>
<body>
	<div id="div1">点击我展开</div>
	<div id="div2"></div>
	<div id="div3">点击我收起</div>

	<script type="text/javascript">
		var oDiv1 = document.getElementById('div1')
		var oDiv2 = document.getElementById('div2')
		var oDiv3 = document.getElementById('div3')

		oDiv1.onclick=function(){
			moving(oDiv2,'width',400,function(){
				moving(oDiv2,'height',400)
			})
		}

		oDiv3.onclick=function(){
			moving(oDiv2,'height',100,function(){
				moving(oDiv2,'width',100)
			})
		}

		//写一个方法获取我们需要改变的样式的值
		function getStyleValue(obj,attr){
			if(obj.currentStyle){
				return obj.currentStyle[attr]
			}else{
				return getComputedStyle(obj,false)[attr]
			}
		}
		console.log(getStyleValue(oDiv1,'background'))


		function moving(obj,attr,target,callbackfun){
			clearInterval(obj.timer)
			obj.timer=setInterval(function(){
				//定义一个变量接收我们需要改变的样式的值
				var currvalue = parseInt(getStyleValue(obj,attr))
				//变速变量
				var speed = (target-currvalue)/8
				//做向上取整和向下取整处理
				speed = speed>0?Math.ceil(speed):Math.floor(speed)
				if(currvalue==target){
					clearInterval(obj.timer)
					//判断执行回调函数
					if(callbackfun){
						callbackfun()
					}
				}else{
					obj.style[attr] = currvalue + speed + 'px'
				}
			},30)
		}
	</script>
</body>
</html>

效果图：
在这里插入图片描述

Mr.ZKH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深度讲解链式运动框架

在改变单⼀任意值运动框架添加⼀个回调函数参数链式运动顾名思义就是先运动完⼀个值再运动另⼀个<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>深度讲解链式运动框架</title> <style type="text/css"...
复制链接

扫一扫