原生JS如何實現滑動按鈕效果

# 原生JS如何實現滑動按鈕效果

## 前言

滑動按鈕（Toggle Switch）是現代Web界面中常見的交互元素，它通過左右滑動來切換兩種狀態（如開/關）。與傳統的復選框相比，滑動按鈕具有更直觀的視覺反饋和更好的移動端適配性。本文將詳細介紹如何使用原生JavaScript實現一個功能完善、可定制性強的滑動按鈕效果。

## 一、基礎HTML結構

首先構建最基礎的HTML結構：

```html
<div class="toggle-container">
  <input type="checkbox" id="toggle" class="toggle-input" hidden>
  <label for="toggle" class="toggle-label">
    <span class="toggle-handle"></span>
  </label>
</div>

關鍵元素說明： - input[type="checkbox"]：隱藏的復選框，用于存儲狀態 - label：作為可視化的滑動軌道 - span：滑動按鈕的圓形手柄

二、CSS樣式設計

1. 基礎樣式

.toggle-container {
  position: relative;
  display: inline-block;
}

.toggle-input {
  position: absolute;
  opacity: 0;
}

.toggle-label {
  display: block;
  width: 60px;
  height: 34px;
  background-color: #ccc;
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s;
  position: relative;
}

.toggle-handle {
  position: absolute;
  width: 26px;
  height: 26px;
  background: white;
  border-radius: 50%;
  top: 4px;
  left: 4px;
  transition: transform 0.3s;
}

2. 激活狀態樣式

.toggle-input:checked + .toggle-label {
  background-color: #4CAF50;
}

.toggle-input:checked + .toggle-label .toggle-handle {
  transform: translateX(26px);
}

三、JavaScript交互實現

1. 基礎功能實現

const toggle = document.getElementById('toggle');

toggle.addEventListener('change', function() {
  const isChecked = this.checked;
  console.log('Toggle state:', isChecked);
  
  // 可以在此添加狀態變化后的業務邏輯
  if(isChecked) {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
});

2. 添加滑動動畫

通過修改transition屬性實現平滑動畫：

const toggleLabel = document.querySelector('.toggle-label');
const toggleHandle = document.querySelector('.toggle-handle');

// 確保元素存在
if(toggleLabel && toggleHandle) {
  toggleLabel.style.transition = 'background-color 0.4s';
  toggleHandle.style.transition = 'transform 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
}

3. 觸摸事件支持（移動端適配）

let startX = 0;
let currentX = 0;
let isDragging = false;

toggleLabel.addEventListener('touchstart', function(e) {
  startX = e.touches[0].clientX;
  currentX = toggle.checked ? this.offsetWidth - toggleHandle.offsetWidth : 0;
  isDragging = true;
  e.preventDefault();
});

toggleLabel.addEventListener('touchmove', function(e) {
  if(!isDragging) return;
  
  const touchX = e.touches[0].clientX;
  const diff = touchX - startX;
  const maxOffset = this.offsetWidth - toggleHandle.offsetWidth - 8;
  
  let newX = currentX + diff;
  newX = Math.max(0, Math.min(maxOffset, newX));
  
  toggleHandle.style.transform = `translateX(${newX}px)`;
  e.preventDefault();
});

toggleLabel.addEventListener('touchend', function() {
  if(!isDragging) return;
  isDragging = false;
  
  const threshold = toggleLabel.offsetWidth / 3;
  const currentPos = parseInt(toggleHandle.style.transform.replace('translateX(', '').replace('px)', '')) || 0;
  
  if(currentPos > threshold) {
    toggle.checked = true;
    toggleHandle.style.transform = `translateX(${toggleLabel.offsetWidth - toggleHandle.offsetWidth - 8}px)`;
    toggleLabel.style.backgroundColor = '#4CAF50';
  } else {
    toggle.checked = false;
    toggleHandle.style.transform = 'translateX(0)';
    toggleLabel.style.backgroundColor = '#ccc';
  }
  
  // 觸發change事件
  const event = new Event('change');
  toggle.dispatchEvent(event);
});

四、高級功能擴展

1. 自定義主題顏色

function setToggleTheme(activeColor, inactiveColor, handleColor) {
  const style = document.createElement('style');
  style.id = 'toggle-theme';
  style.textContent = `
    .toggle-input:checked + .toggle-label {
      background-color: ${activeColor};
    }
    .toggle-label {
      background-color: ${inactiveColor};
    }
    .toggle-handle {
      background-color: ${handleColor};
    }
  `;
  
  const existingStyle = document.getElementById('toggle-theme');
  if(existingStyle) {
    existingStyle.replaceWith(style);
  } else {
    document.head.appendChild(style);
  }
}

// 使用示例
setToggleTheme('#2196F3', '#e0e0e0', '#ffffff');

2. 尺寸自定義

function setToggleSize(width, height) {
  const handleSize = height - 8;
  
  toggleLabel.style.width = `${width}px`;
  toggleLabel.style.height = `${height}px`;
  toggleLabel.style.borderRadius = `${height}px`;
  
  toggleHandle.style.width = `${handleSize}px`;
  toggleHandle.style.height = `${handleSize}px`;
  
  // 更新已選中狀態的位置
  if(toggle.checked) {
    toggleHandle.style.transform = `translateX(${width - handleSize - 4}px)`;
  }
}

// 使用示例
setToggleSize(80, 40);

3. 添加文字標簽

<label for="toggle" class="toggle-label">
  <span class="toggle-handle"></span>
  <span class="toggle-text-on">ON</span>
  <span class="toggle-text-off">OFF</span>
</label>

添加CSS樣式：

.toggle-text-on, 
.toggle-text-off {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: bold;
  color: white;
  user-select: none;
}

.toggle-text-on {
  left: 10px;
  display: none;
}

.toggle-text-off {
  right: 10px;
}

.toggle-input:checked + .toggle-label .toggle-text-on {
  display: block;
}

.toggle-input:checked + .toggle-label .toggle-text-off {
  display: none;
}

五、性能優化建議

1. 減少重繪：將頻繁變化的屬性（如transform）單獨放在復合層

   .toggle-handle {
    will-change: transform;
   }
   

2. 事件委托：如果有多個滑動按鈕，使用事件委托

   document.addEventListener('change', function(e) {
    if(e.target.classList.contains('toggle-input')) {
      // 處理切換邏輯
    }
   });
   

3. 防抖處理：對resize事件添加防抖

   let resizeTimer;
   window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
      // 重新計算位置
    }, 250);
   });
   

六、完整代碼示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滑動按鈕示例</title>
  <style>
    .toggle-container {
      position: relative;
      display: inline-block;
      margin: 20px;
    }
    
    .toggle-input {
      position: absolute;
      opacity: 0;
    }
    
    .toggle-label {
      display: block;
      width: 60px;
      height: 34px;
      background-color: #ccc;
      border-radius: 34px;
      cursor: pointer;
      transition: background-color 0.4s;
      position: relative;
    }
    
    .toggle-handle {
      position: absolute;
      width: 26px;
      height: 26px;
      background: white;
      border-radius: 50%;
      top: 4px;
      left: 4px;
      transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      will-change: transform;
    }
    
    .toggle-input:checked + .toggle-label {
      background-color: #4CAF50;
    }
    
    .toggle-input:checked + .toggle-label .toggle-handle {
      transform: translateX(26px);
    }
    
    .toggle-text {
      margin-left: 10px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class="toggle-container">
    <input type="checkbox" id="toggle" class="toggle-input">
    <label for="toggle" class="toggle-label">
      <span class="toggle-handle"></span>
    </label>
    <span class="toggle-text">夜間模式</span>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const toggle = document.getElementById('toggle');
      const toggleLabel = document.querySelector('.toggle-label');
      const toggleHandle = document.querySelector('.toggle-handle');
      
      // 基礎功能
      toggle.addEventListener('change', function() {
        document.body.style.backgroundColor = this.checked ? '#222' : '#fff';
        document.body.style.color = this.checked ? '#fff' : '#333';
      });
      
      // 觸摸支持
      let startX = 0;
      let currentX = 0;
      let isDragging = false;
      
      toggleLabel.addEventListener('touchstart', function(e) {
        startX = e.touches[0].clientX;
        currentX = toggle.checked ? this.offsetWidth - toggleHandle.offsetWidth - 8 : 0;
        isDragging = true;
        e.preventDefault();
      });
      
      // ... 其他事件處理與前面示例相同 ...
    });
  </script>
</body>
</html>

七、常見問題解決方案

1. 點擊時出現閃動

解決方案：在CSS中添加

.toggle-label {
  -webkit-tap-highlight-color: transparent;
}

2. 動畫卡頓

可能原因：瀏覽器重繪開銷過大 解決方案：

.toggle-label {
  transform: translateZ(0);
  backface-visibility: hidden;
}

3. 表單提交問題

如果需要作為表單元素提交，確保添加name屬性：

<input type="checkbox" id="toggle" name="dark_mode" value="1">

結語

通過原生JavaScript實現滑動按鈕效果不僅能夠加深對DOM操作和事件處理的理解，還能獲得更好的性能和可定制性。本文介紹的方法涵蓋了從基礎實現到高級擴展的完整流程，開發者可以根據實際需求進行靈活調整。相比依賴第三方庫，原生實現的優勢在于： - 無依賴，體積小 - 完全可控的交互細節 - 更好的性能表現 - 深度定制能力

希望本文能幫助你掌握這一實用的前端開發技巧！ “`