咨询实现跟随鼠标并可向鼠标延展的侧边栏的技术方案

我最近看到一款侧边栏，它能跟随鼠标移动，当鼠标足够靠近时还会向鼠标方向“延展”。我想实现这个交互效果，目前已经能让元素跟随鼠标移动，但不清楚怎么实现侧边栏向鼠标位置延伸并突破矩形边界的效果。

一、完善基础鼠标跟随与距离检测 #

你现有的代码已经实现了元素跟随鼠标Y轴移动，在此基础上我们可以添加鼠标距离检测和动态延展逻辑：

HTML结构 #

<div class="sidebar">
  <div class="stretch-dot"></div>
</div>

CSS样式 #

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 50px;
  height: 100vh;
  background: #2d3748;
  overflow: visible; /* 允许内部元素突破侧边栏边界 */
}

.stretch-dot {
  position: absolute;
  left: 100%;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #3b82f6;
  background: rgba(59, 130, 246, 0.8);
  transition: all 0.2s ease;
  transform-origin: left center;
}

JavaScript逻辑（jQuery） #

$(document).mousemove(function(e) {
  const $sidebar = $('.sidebar');
  const $dot = $('.stretch-dot');
  
  // 让圆点跟随鼠标Y轴居中
  $dot.css('top', e.pageY - $dot.height()/2);
  
  // 计算鼠标与侧边栏右侧的水平距离
  const sidebarRight = $sidebar.offset().left + $sidebar.width();
  const mouseDistance = e.pageX - sidebarRight;
  
  // 当鼠标距离侧边栏在120px范围内时，触发延展
  if (mouseDistance > 0 && mouseDistance < 120) {
    // 距离越近，延展长度越长
    const stretchLength = 120 - mouseDistance;
    $dot.css({
      'width': 50 + stretchLength,
      'border-radius': '25px 0 0 25px' // 把圆点拉成椭圆，模拟延展效果
    });
  } else {
    // 超出范围时恢复原状
    $dot.css({
      'width': 50,
      'border-radius': '50%'
    });
  }
});

二、实现“突破矩形”的Gooey视觉效果 #

如果想要示例中那种软化边缘、像是侧边栏被“拉出来”的效果，可以用SVG滤镜实现Gooey效果：

添加SVG滤镜 #

<!-- 隐藏的SVG，用于定义Gooey滤镜 -->
<svg style="position: absolute; width: 0; height: 0;">
  <filter id="gooey-filter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
    <feComposite in="SourceGraphic" in2="goo" operator="atop" />
  </filter>
</svg>

修改侧边栏CSS #

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 50px;
  height: 100vh;
  background: #2d3748;
  overflow: visible;
  filter: url("#gooey-filter"); /* 应用Gooey滤镜 */
}

.stretch-dot {
  position: absolute;
  left: 30px; /* 调整位置，让圆点和侧边栏衔接更自然 */
  top: 0;
  width: 0;
  height: 50px;
  border-radius: 25px;
  background: #3b82f6;
  transition: all 0.3s ease;
}

调整JS逻辑适配新样式 #

$(document).mousemove(function(e) {
  const $sidebar = $('.sidebar');
  const $dot = $('.stretch-dot');
  
  $dot.css('top', e.pageY - $dot.height()/2);
  
  const sidebarRight = $sidebar.offset().left + $sidebar.width();
  const mouseDistance = e.pageX - sidebarRight;
  
  if (mouseDistance > 0 && mouseDistance < 150) {
    const stretchLength = 150 - mouseDistance;
    $dot.css('width', stretchLength);
  } else {
    $dot.css('width', 0);
  }
});

核心实现要点 #

• 鼠标位置监听：通过mousemove事件实时获取鼠标坐标，控制延展元素的垂直位置
• 距离触发逻辑：计算鼠标与侧边栏的水平距离，动态调整延展元素的宽度
• 平滑过渡：用CSStransition实现动画的平滑过渡，避免生硬变化
• 视觉优化：Gooey滤镜可以让侧边栏和延展元素的衔接更自然，模拟“拉伸”的质感

内容的提问来源于stack exchange，提问作者soupbin