如何在 Owl Carousel 中实现悬停时非活动项自动扩散效果

本文详解如何利用 owl carousel 的 dom 结构特性，通过 `data-mole` 属性与 css `transform: translatex()` 动态控制非活动项间距，解决直接修改 margin 导致布局错乱的问题，并兼容缩放动画。

Owl Carousel 在初始化后会对每个 .item 元素进行封装，生成外层容器

核心思路是避免修改 margin 或 width 等影响文档流的属性，改用 transform: translateX() 实现视觉位移——它不触发重排（reflow），性能更优，且与 transform: scale() 完全兼容。

以下是完整可运行的实现方案：

✅ 正确绑定事件（jQuery + Owl Carousel 事件委托）

$(function() {
  const owl = $(".owl-carousel");

  owl.owlCarousel({
    items: 5,
    loop: false, // 建议关闭 loop 以简化兄弟节点逻辑（如需 loop，需额外处理克隆项）
    nav: true,
    margin: 16, // 基础间距（替代原 CSS margin
-right），确保初始布局稳定
    responsive: {
      0: { items: 1 },
      768: { items: 3 },
      992: { items: 5 }
    }
  });

  // 使用事件委托监听 .owl-item 悬停（关键！）
  owl.on('mouseenter', '.owl-item', function() {
    const $hovered = $(this);
    // 向右所有兄弟项添加 data-mole="right"
    $hovered.nextAll('.owl-item').each(function() {
      this.dataset.mole = 'right';
    });
    // 向左所有兄弟项添加 data-mole="left"
    $hovered.prevAll('.owl-item').each(function() {
      this.dataset.mole = 'left';
    });
  }).on('mouseleave', '.owl-item', function() {
    // 鼠标离开时清除所有 data-mole
    $('.owl-item').each(function() {
      this.dataset.mole = '';
    });
  });
});

✅ 对应 CSS（声明式控制，零 JS 样式操作）

/* 基础项样式（注意：.item 是内容容器，.owl-item 才是布局单元） */
.owl-carousel .item {
  display: block;
  transition: transform 0.3s ease-in-out;
  border-radius: 50%;
}

.owl-carousel .item img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  display: block;
}

.owl-carousel .item:hover {
  transform: scale(1.3);
}

/* 利用 data 属性驱动扩散动画（作用于 .owl-item） */
.owl-carousel .owl-item[data-mole="right"] .item {
  transform: translateX(1.2em);
}

.owl-carousel .owl-item[data-mole="left"] .item {
  transform: translateX(-1.2em);
}

/* 可选：增强悬停焦点感（高亮当前项） */
.owl-carousel .owl-item:hover .item {
  z-index: 2;
  position: relative;
}

⚠️ 注意事项与优化建议

• loop: true 的兼容性：当启用循环模式时，Owl 会克隆首尾项并插入 DOM，此时 prevAll/nextAll 可能匹配到克隆节点。如需支持 loop，建议改用 owl.currentItem API 获取当前索引，再结合 owl.to() 或自定义计算逻辑控制扩散范围。
• 性能优化：translateX 已启用 GPU 加速，但若卡片数量多（>10），可添加 will-change: transform 到 .owl-item .item 提前提示浏览器优化。
• 响应式适配：在 responsive 配置中调整 items 数量后，扩散距离（如 1.2em）建议按比例缩放，或使用 CSS 自定义属性（--spread-distance）配合媒体查询动态设置。
• 无障碍友好：为防止键盘用户误触，可补充 focusin/focusout 事件监听，或增加 @media (hover: hover) 媒体查询包裹扩散样式，确保触屏设备无副作用。

该方案真正解耦了布局逻辑与交互逻辑，既满足视觉需求，又保持 Owl Carousel 的稳定性与可维护性。只需微调 translateX 值和过渡时间，即可快速适配不同设计稿要求。