当前位置： 首页 > Web前端 > HTML

有关如何使用CSS和JS创建“前后”图像比较功能的分步教程

时间：2023-04-02 22:41:20 HTML

使用html范围输入创建前后图像比较效果。使用CSS和JavaScript，JS部分代码很少，主要是HTML、CSS和实现思路。简介如果您有两个图像要比较，“之前和之后”图像滑块是一个有效而简单的UI元素。“滑块”元素允许您的用户控制两个图像在屏幕上的显示方式，并自由浏览两个不同的图像。您可能认为它需要一些库来创建这样的效果，但实际上，它是一个非常直接且易于编码的UI。只要具备CSS和JS的基础知识，任何人都可以创建它。在本教程中，我将详细解释此UI背后的概念、如何实现它以及进一步增强功能的建议。结果演示分步指南步骤1.理解概念这个“图像滑块”的概念非常简单，您只需要两个组件，图像容器和滑块。图像容器只是一个普通的div，两个相同大小的图像相互重叠。一个作为“背景”，另一个作为“前景”。我们将使用绝对定位将前景图像直接放置在背景图像之上。背景图像的宽度始终为100%，而前景图像的宽度会根据用户输入而变化，从而使部分背景图像出现。第二个组件是“滑块”。为了简单起见，我们可以使用html范围输入元素。它允许用户通过在您定义的最小值和最大值之间拖动来选择一个值。使用javascript中的事件侦听器很容易获取输入值。使用默认滑块输入的一个缺点是样式有限。您不能对设计过于痴迷，如果您正在寻找更可定制的滑块，您可能需要自己构建它。不过，这不是本教程的重点。我们将使滑块的宽度和高度为100%，并将其放置在图像容器的顶部。当用户拖动滑块时，我们会同时更新前景的宽度，从而产生用户正在拖动图像的错觉。Step2.创建图片容器首先创建容器，这是一个简单的结构，里面有两个div。由于我们不希望图像根据包含它们的div的宽度进行缩放，因此我们将对图像应用背景图像而不是标签。我们需要使用的一种重要样式是background-size属性，并确保图像始终具有相同的大小。HTML:

CSS:.container{位置：相对的;宽度：900px；高度：600px；border:2pxsolidwhite;}.img{position:absolute;顶部：0；左：0；宽度：100%；高度：100%；;}.background-img{background-image:url('https://i.loli.net/2020/12/28/1dGpFx3zJ9Pjcme.jpg');}.foreground-img{background-image:url('https://i.loli.net/2020/12/28/xIZmjtBR5VWoqiz.jpg');width:50%;}为了使本教程更容易，我对所有内容都使用了固定大小。如果您不想使用SCSS，只需将其样式设置为扁平而不是嵌套现在我们有了容器，让我们添加滑块。第3步.创建滑块我们的滑块需要覆盖整个图像，并用细白条“划分”图像的前后部分。这可以通过设置滑块和滑块（您拖动的部分）的样式来完成。我们需要让滑块和滑块的默认外观不可见，然后在其上应用我们自己的样式。HTML（图片下方）：...
.container{位置：相对；宽度：900px；高度：600px；border:2pxsolidwhite;}.img{position:absolute;顶部：0；左：0；宽度：100%；高度：100%；background-size:900px100%;}.background-img{background-image:url('https://i.loli.net/2020/12/28/1dGpFx3zJ9Pjcme.jpg');}.foreground-img{背景-image:url('https://i.loli.net/2020/12/28/xIZmjtBR5VWoqiz.jpg');宽度：50%；}.slider{显示：flex；证明内容：居中；对齐项目：居中；位置：绝对；-webkit外观：无；外观：无；宽度：100%；高度：100%；背景：rgba(242,242,241,.3)；大纲：无；保证金：0；过渡：所有.2s;}.slider:hover{背景：rgba(242,242,241,.1);}.slider::-webkit-slider-thumb{-webkit-外观：无；外观：无；宽度：6px；高度:600px;背景：白色；cursor:pointer;}我在滑块上应用了一个稍微可见的灰色背景，在悬停时，使颜色更透明当用户将鼠标悬停在图像上时创建“焦点”效果。对于滑块，它只是一个具有容器全高的白色背景div。我们现在有一个工作滑块，让我们将它与前景图像的宽度联系起来。第4步。将事件侦听器添加到滑块最后一步是将滑块上的值链接到前景图像的宽度，这很容易做到（因为我们为滑块使用本机html范围输入）。应用事件侦听器时，event.target.value中可用的值为1–100。然后我们只需要选择前景元素并在滑块更新时更改其宽度。JS:constslider=document.getElementById("slider");slider.addEventListener("input",function(e){document.querySelector(".foreground-img").style.width=e.target.value+"%"})如果没有按预期工作，试试查看您是否正确获取了滑块的值，然后再次检查CSSbackground-size属性酷！正常运作。作为使用范围输入的额外好处，我们甚至可以在容器内部单击以使滑块移动到单击的位置。我们可以（并且可能应该）添加到UI的另一件事是在滑块上做一个“拖动我”的圆圈图标，以指示这是一个可拖动的组件。第五步（可选）在滑块上添加一个圆圈thumbnativerangeinput有它的优点（容易实现，容易取值等），但是我们在样式方面做的不多。由于我们用白色分隔符替换了默认的“圆圈”拇指，因此我们需要以某种方式将圆圈添加回去。一种快速（但不切实际）的方法是添加另一个与滑块完全无关但以滑块为中心并通过javascript“跟随”滑块移动的元素。这正是我们要做的。HTML：...CSS：.slider-button{pointer-events:none;位置：绝对；宽度：30px；高度：30px；边界半径：50%；背景色：白色；左：计算（50%-18px）；顶部：计算（50%-18px）；显示：弹性；证明内容：居中；对齐项目：居中；}.slider-button::after{content：''；填充：3px；显示：内联块；边框：实心#5D5D5D；边框宽度：02px2px0；变换：旋转（-45度）；}.slider-button::before{内容：''；填充：3px；显示：内联块；边框：实心#5D5D5D；边框宽度：02px2px0；transform:rotate(135deg);}after和before元素在圆圈按钮内添加两个“箭头”JS：constslider=document.getElementById("slider");letsliderPosslider.addEventListener("input",function(e){sliderPos=e.target.valuedocument.querySelector(".foreground-img").style.width=`${sliderPos}%`document.querySelector(".slider-button").style.left=`calc(${sliderPos}%-18px)`})我们需要做的另一件事是使圆圈不可选择，以便鼠标事件始终转到滑块。通过一些仔细的定位和JS，我们使圆圈拇指随着滑块移动。这样，我们的“之前和之后”图像滑块就完成了，您现在可以选择自己喜欢的图像并进行试验。源码效果和完整代码：https://coding.zhangbing.site总结前面说过，这个UI元素的概念很简单，不需要再安装其他库来实现这个效果。也就是说，这是一个非常基本的实现，正如您所看到的，我使用了很多固定的像素大小。如果您想要更“高级”的设计，我建议您花一些时间研究设计在不同窗口大小下的变化情况。在这个例子中，我使用了黑白和彩色图像的比较。然而，我见过许多其他具有时变特征的例子（比如100年前和现在的同一座城市）。对于这种类型的设计，实现是相似的。此外，由于我们使用的是background-image属性（不受容器大小的影响），您还可以轻松创建带有动画gif的静态到动画滑块。如果您喜欢本教程或有其他想法，请发表评论！原文：https://blog.zhangbing.site/2021/01/04/how-to-create-a-before-after-image-slider-with-css-and-js/

有关如何使用CSS和JS创建“前后”图像比较功能的分步教程相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。