实战：使用CSS和JS创建“前后”图像比较效果

这一节我们将会用到上一节的【HTML】slider：

【HTML】slider

使用 html range input创建前后图像比较效果的分步教程。使用 CSS 和 JavaScript，JS 部分代码非常少，主要是 HTML、CSS，和实现思路。

介绍

如果你有两张图像进行比较，则“前后”图像滑块是一个有效而又简单的 UI 元素。

该“slider”元素使你的用户可以控制两个图像在屏幕上的显示方式，并自由浏览两个不同的图像。你可能认为它需要一些库来创建这样的效果，但实际上，它是一个非常直接和容易编码的 UI。有了 CSS 和 JS 的基础知识，每个人都可以创建它。

在本教程中，我将详细解释这个 UI 背后的概念，如何实现它，以及进一步增强的建议。

步骤 1.了解概念

这个“图像 slider”的概念非常简单，你只需要两个组件，图像容器和一个 slider。

图片容器只是一个普通的 div，两张相同大小的图片相互重叠。一个作为“背景”，另一个作为“前景”。

我们将使用绝对定位使前景图像直接置于背景图像之上。背景图的宽度总是 100%，而前景图的宽度会根据用户的输入而改变，使背景图的一部分出现。

第二个组件是“slider”。为了使事情简单化，我们可以使用 html range输入元素。它允许用户在你定义的最小值和最大值之间通过拖动来选择一个值。使用 javascript 中的事件监听器可以很容易地获取输入值。

步骤 2.创建图像容器

首先创建容器，这是一个内部有两个 div 的简单结构。由于我们不希望图像根据包含它们的 div 宽度进行缩放，因此我们将对图像应用 background-image 而不是 <img> 标签。我们需要使用的一种重要样式是 background-size 属性，并确保图像始终保持相同大小。

HTML:

<div class="container">

  <div class="img background-img"></div>
  <div class="img foreground-img"></div>
  <input
    type="range"
    min="1"
    max="100"
    value="50"
    class="slider"
    name="slider"
    id="slider"
  />
</div>

css：

.container {
  position: relative;
  width: 900px;
  height: 600px;
  border: 2px solid white;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 900px 100%;
}
.background-img {
  background-image: url("https://https://www.ooize.com/assets/uploads/2020/12/小程序-1-1-1.png");
}
.foreground-img {
  background-image: url("https://https://www.ooize.com/assets/uploads/2020/12/小程序-1-1-1.png");
  width: 50%;
}

JS：

const slider = document.getElementById("slider");
	let sliderPos;
	slider.addEventListener("input", function(e) {
	  sliderPos = e.target.value;
	  document.querySelector(
	    ".foreground-img"
	  ).style.width = `${sliderPos}%`;
	  document.querySelector(
	    ".slider-button"
	  ).style.left = `calc(${sliderPos}% - 18px)`;
	});

具体效果自行尝试。

©️李联华的博客网 当前IP地址：18.119.132.35，归属地:俄亥俄州Dublin ，欢迎您的访问！