Webflow服务板块Logo点击缩放移位交互批量实现求助

1. 统一元素结构与类命名 #

• 给所有服务Logo容器添加统一类名，比如 service-logo，同时给每个Logo加唯一自定义属性，例如 data-service="service-1"、data-service="service-2" 以此类推
• 给目标高亮位置的容器加类名 active-logo-container，内部放置初始高亮Logo和描述区域（描述区域类名设为 service-description）

2. 定义基础样式与过渡效果 #

在页面自定义CSS中添加以下规则，确保Logo切换时有平滑动画：

.service-logo {
  transition: transform 0.3s ease;
  cursor: pointer;
}
.active-logo-container {
  /* 这里设置高亮状态的固定尺寸和位置，比如： */
  width: 200px;
  height: 200px;
  position: relative;
}

3. 全局交互+JS辅助实现批量处理 #

无需逐个设置点击交互，通过一段自定义代码完成所有逻辑，将代码添加到页面「页脚代码」区域：

// 初始化：记录所有Logo的初始状态
document.querySelectorAll('.service-logo').forEach(logo => {
  logo.dataset.initTransform = 'translate(0,0) scale(1)';
});

// 监听所有Logo的点击事件
document.querySelectorAll('.service-logo').forEach(logo => {
  logo.addEventListener('click', function() {
    // 1. 重置所有Logo到初始状态
    document.querySelectorAll('.service-logo').forEach(item => {
      item.style.transform = item.dataset.initTransform;
    });
    
    // 2. 获取目标高亮容器的位置与尺寸
    const targetBox = document.querySelector('.active-logo-container').getBoundingClientRect();
    const currentBox = this.getBoundingClientRect();
    
    // 3. 计算需要移动和缩放的参数
    const moveX = targetBox.left - currentBox.left;
    const moveY = targetBox.top - currentBox.top;
    const scaleRatio = targetBox.width / currentBox.width;
    
    // 4. 应用变换到当前点击的Logo
    this.style.transform = `translate(${moveX}px, ${moveY}px) scale(${scaleRatio})`;
    
    // 5. 更新服务描述（提前把描述文本存在Logo的data-description属性里）
    const descText = this.getAttribute('data-description');
    document.querySelector('.service-description').textContent = descText;
  });
});

4. 补充配置说明 #

• 给每个 service-logo 元素添加 data-description 属性，值为对应服务的描述文本，比如 data-description="提供专业的UI/UX设计服务，覆盖从需求调研到落地的全流程"
• 如果是CMS动态生成的服务项，直接将 data-description 绑定到CMS的描述字段即可，无需手动设置每个Logo

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