运动(move)的封装

最新推荐文章于 2022-06-11 17:36:30 发布

zyfacd

最新推荐文章于 2022-06-11 17:36:30 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/zyfacd/article/details/104622260

版权

运动的封装

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{width: 100px;height: 100px;position: absolute;left: 0;top:0;background: red;}
			#box2{width: 100px;height: 100px;position: absolute;left: 0;top:140px;background: blue;}
			.line{width: 1px;height: 500px;background: #000;position: absolute;left: 600px;top:0;}
		</style>
	</head>
	<body>
		 <div id="box1"></div>
		 <div id="box2"></div>
		 <div class="line"></div>
	</body>
	<script type="text/javascript">
		let obox1 = document.getElementById("box1");
		let obox2 = document.getElementById("box2");
		
		obox1.onmouseover=function(){
			move(obox1,"left",1000);
		}
		
		function move(ele,attr,target){//元素 属性 目标
			// ele是一个元素对象，对象，对象可以做什么，存储数据
			clearInterval(ele.t);
			ele.t=setInterval(()=>{
				var s=getStyle(ele,attr);// 得到带有px的字符
				var iNow=parseInt(s);// 借助parseInt的取整，得到整除部分，去掉px
				
				let speed = (target - iNow)/10;
				speed=speed < 0 ? Math.floor(speed) : Math.ceil(speed);
				if(iNow === target){
					clearInterval(t);
				}else{
					ele.style.left=iNow+10+"px";
				}
			},30);
		}
		
		  // 获取非行内样式的兼容：必然会得到当前的样式值
		    function getStyle(ele,attr){
		        if(ele.currentStyle){
		            return ele.currentStyle[attr];
		        }else{
		            return getComputedStyle(ele,false)[attr];
		        }
		    }
	</script>
</html>