实现哔哩哔哩点击小滑块移动效果

最新推荐文章于 2024-08-30 15:33:13 发布

Fly_hao.belief

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量201

点赞数 2

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/2301_77451464/article/details/140962355

版权

中心知识：offsetLeft和offsetTop

获取元素距离自己定位父级元素的左、上距离

核心思想就是将line设置一个单独的盒子，通过JS来判断点击对象，获取点击对象的offLeft值

然后再移动line的值，并且移动的值就是点击对象的offLeft值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实现哔哩哔哩点击小滑块移动效果</title>
  <style>
    .box {
      position: relative;
      width: 800px;
      height: 80px;
      background-color: #333;
      margin: 0 auto;
    }

    .box a {
      display: block;
      text-decoration: none;
      float: left;
      color: #ccc;
      font-size: 30px;
      line-height: 80px;
      padding: 0 30px 0 30px;
    }

    .line {
      position: absolute;
      left: 20px;
      bottom: 0;
      width: 80px;
      border: 2px solid #ccc;
      transition: all 0.3s;
    }
  </style>
</head>

<body>
  <div class="box">
    <a href="#">首页</a>
    <a href="#">首页</a>
    <a href="#">首页</a>
    <a href="#">首页</a>
    <a href="#">首页</a>
    <a href="#">首页</a>
    <!-- 设置一个单独的盒子，用来移动下面的横线 -->
    <div class="line"></div>
  </div>
  <script>
    // 获取父元素，用事件委托
    const box = document.querySelector('.box')
    const line = document.querySelector('.line')
    box.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // e.target.tagName 就是点击的当前元素
        // console.log(e.target.offsetLeft);
        line.style.transform = `translateX(${e.target.offsetLeft}px)`
      }
    })

  </script>

</body>

</html>