預覽:
CodePen URL:
說明:
- 製作多項目的「前後圖」對比。
- 使用 font-awesome 替換
<input type=“range”>
icon。 - 改為
document.addEventListener(“input”, (event) => {
監聽 if條件。 - 拿掉
ID
名稱監聽方式。
參考:
- Before & After Image
- V I - Before and After Image Comparison Slider using CSS Variables. SUPER simple.
- 原生JS | 滑動前後對比圖片,Before/After效果【一起學前端
- 「前後對比」效果|只用一行JS
- Before/After Image Slider Comparison (HTML, CSS, and JavaScript)
後續參考: