实战:使用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地址:44.200.27.215,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/actual-combat-use-css-and-js-to-create-images-before-and-after-comparison.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

留下评论

Loading...