制作滑块以突出显示导航栏上的活动链接

<div class="slider">
  <div class="background"></div>
  <div class="handle"></div>
  <div class="indicator"></div>
</div>

.slider {
  position: relative;
  width: 200px;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
}

.handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px;
  transition: left 0.3s;
}

.indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  border-radius: 50%;
  transition: left 0.3s;
}

var handle = document.querySelector('.handle');
var indicator = document.querySelector('.indicator');

handle.addEventListener('mousedown', function(event) {
  // 记录鼠标按下时的初始位置
  var startX = event.clientX;
  
  // 监听鼠标移动事件
  document.addEventListener('mousemove', moveHandle);
  
  // 监听鼠标松开事件
  document.addEventListener('mouseup', releaseHandle);

  function moveHandle(event) {
    // 计算鼠标移动的距离
    var deltaX = event.clientX - startX;
    
    // 更新手柄和指示点的位置
    handle.style.left = deltaX + 'px';
    indicator.style.left = deltaX + 'px';
  }

  function releaseHandle() {
    // 移除事件监听器
    document.removeEventListener('mousemove', moveHandle);
    document.removeEventListener('mouseup', releaseHandle);
  }
});