侧边栏隐藏显示过渡效果（缓冲）,DOM操作

最新推荐文章于 2023-03-10 17:09:30 发布

宝贝QY

最新推荐文章于 2023-03-10 17:09:30 发布

阅读量2.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_36070288/article/details/80422253

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这里写图片描述

鼠标移动到分享按钮上，侧边栏自动展开，并做缓冲运动（先快后慢）

直接上代码：

<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<title>分享</title>
	<style type="text/css">
	  *{
	    margin: 0;
		padding: 0;
	  }
	  .box{
		position: absolute;
		width: 100px;
		height: 400px;
		background: green;
		left: -100px;
		top: 50%;
		margin-top:-200px;
		text-align: center;
		font-size: 20px;
		color: #fff;
		line-height: 400px;
	  }
	  .box-share{
		position: absolute;
		height: 40px;
		width: 20px;
		background: red;
		right: -20px;
		top: 50%;
		margin-top: -25px;
		color: #000;
		font-size: 16px;
		text-align: center;
		line-height: 20px;
		padding: 5px 0;
		border-radius: 0 10px 10px 0;
	  }
	</style>
	<script type="text/javascript">
	  window.onload = function () {
		let box = document.getElementsByClassName('box')[0];
		box.onmouseover = () => {
		  startMove(0)
		}
		box.onmouseout = () => {
		  startMove(-100)
		}
	  }
	  let timer = null
	  let startMove = iTarget => {
	    let box = document.getElementsByClassName('box')[0]
		clearInterval(timer)
		timer = setInterval(() => {
		  let speed = (iTarget - box.offsetLeft)/15
		  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
		  if (box.offsetLeft == iTarget) {
			clearInterval(timer)
		  } else {
			box.style.left = box.offsetLeft + speed + 'px'
		  }
		}, 30)
	  }
	</script>
  </head>
  <body>
	<div class="box">
	  box内容
	  <div class="box-share">分享</div>
	</div>
  </body>
</html>