怎么使用slider滑块创建图片对比

本篇内容主要讲解“怎么使用slider滑块创建图片对比”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用slider滑块创建图片对比”吧!

先看效果

CSS

.container{position:relative;}.resizer{background-color:#cbd5e0;cursor:ew-resize;height:100%;left:50%;position:absolute;top:0;width:2px;}.modified-image{background-position:topleft;background-repeat:no-repeat;background-size:auto100%;height:100%;left:0;position:absolute;top:0;width:50%;filter:grayscale(100%);}

JavaScript

//Querytheelementconstresizer=document.getElementById('dragMe');constleftSide=resizer.previousElementSibling;constrightSide=resizer.nextElementSibling;//Thecurrentpositionofmouseletx=0;lety=0;letleftWidth=0;//Handlethemousedownevent//that'striggeredwhenuserdragstheresizerconstmouseDownHandler=function(e){//Getthecurrentmousepositionx=e.clientX;y=e.clientY;leftWidth=leftSide.getBoundingClientRect().width;//Attachthelistenersto`document`document.addEventListener('mousemove',mouseMoveHandler);document.addEventListener('mouseup',mouseUpHandler);};constmouseMoveHandler=function(e){//Howfarthemousehasbeenmovedconstdx=e.clientX-x;constdy=e.clientY-y;letnewLeftWidth=((leftWidth+dx)*100)/resizer.parentNode.getBoundingClientRect().width;newLeftWidth=Math.max(newLeftWidth,0);newLeftWidth=Math.min(newLeftWidth,100);leftSide.style.width=`${newLeftWidth}%`;resizer.style.left=`${newLeftWidth}%`;resizer.style.cursor='col-resize';resizer.parentNode.style.cursor='col-resize';leftSide.style.userSelect='none';leftSide.style.pointerEvents='none';rightSide.style.userSelect='none';rightSide.style.pointerEvents='none';};constmouseUpHandler=function(){resizer.style.removeProperty('cursor');resizer.parentNode.style.removeProperty('cursor');leftSide.style.removeProperty('user-select');leftSide.style.removeProperty('pointer-events');rightSide.style.removeProperty('user-select');rightSide.style.removeProperty('pointer-events');//Removethehandlersof`mousemove`and`mouseup`document.removeEventListener('mousemove',mouseMoveHandler);document.removeEventListener('mouseup',mouseUpHandler);};//Attachthehandlerresizer.addEventListener('mousedown',mouseDownHandler);

通过上面的示例可以看到，拖动中间的 slider 滑块，可以很清楚的看到图片的对比效果。

下面我们就来看看是如何实现的。

定义 HTML 结构

<divclass="container"><!--修改后的图--><divclass="modified-image"></div><!--slider滑块--><divclass="resizer"id="dragMe"></div><!--原图--><imgsrc="p3-juejin.byteimg/tos-i-k3u1fbpfcp/361d53f154ec41668a661d1d927f0c2e~tplv-k3u1fbpfcp-watermark.image?"/></div>

修改后的图放在底部，滑块在中间，原图在最上层。

定义 CSS 样式

.container{position:relative;}.modified-image{position:absolute;left:0;top:0;height:100%;width:50%;}

修改后的元素初始默认占据 50% 的宽度。

我们不使用 img 元素来显示修改后的图片，而是使用背景图方式显示，因为图片可以进行缩放。

<divclass="modified-image"></div>

因为使用背景图，所以修改后的图片元素需要设置更多样式，以达到最佳的显示效果。

.modified-image{background-position:topleft;background-repeat:no-repeat;background-size:auto100%;/*...*/}

为了达到对比的效果，我们还要给修改后的图片添加一层滤镜效果。

.modified-image{filter:grayscale(100%);/*...*/}

接下来设置 .resizer 元素的样式，相对而言要简单很多，只需要将它设置到中心位置即可。

.resizer{position:absolute;left:50%;top:0;height:100%;width:2px;background-color:#cbd5e0;cursor:ew-resize;}

使用 position 属性将它定为到中间，注意将鼠标的展现形式更换为 cursor: ew-resize。

HTML 结构和 CSS 样式就差不多了，接下来处理 JavaScript 事件相关内容。

当我们移动 .resizer 元素时，需要事实计算鼠标移动了多远的距离。然后根据当前鼠标的位置，修改 .resizer 元素的位置，以及修改后图片的大小。

实际代码

constresizer=document.getElementById('dragMe');//上一个兄弟元素，也就是修改后的图片元素constleftSide=resizer.previousElementSibling;//记录当前鼠标的位置letx=0;lety=0;//记录修改后图片的宽度letleftWidth=0;//点击resizer元素时触发mousedown事件constmouseDownHandler=function(e){//获取当前鼠标位置x=e.clientX;y=e.clientY;leftWidth=leftSide.getBoundingClientRect().width;//在document元素上添加事件document.addEventListener('mousemove',mouseMoveHandler);document.addEventListener('mouseup',mouseUpHandler);};constmouseMoveHandler=function(e){//计算鼠标移动距离constdx=e.clientX-x;constdy=e.clientY-y;letnewLeftWidth=((leftWidth+dx)*100)/resizer.parentNode.getBoundingClientRect().width;newLeftWidth=Math.max(newLeftWidth,0);newLeftWidth=Math.min(newLeftWidth,100);//设置修改后的图片元素的宽度leftSide.style.width=`${newLeftWidth}%`;resizer.style.left=`${newLeftWidth}%`;};//给resizer元素添加事件resizer.addEventListener('mousedown',mouseDownHandler);

代码有点长，需要你花点时间仔细看看才能理解。

最后还有一个需要注意的点，我们要保证鼠标滑块不会滑出可视范围，所以需要限制其最大值和最小值。

因为修改后的图片元素的宽度值时百分比类型，所以最小值为 0，最大值为 100。

constmouseMoveHandler=function(e){//...newLeftWidth=Math.max(newLeftWidth,0);newLeftWidth=Math.min(newLeftWidth,100);};

到此，相信大家对“怎么使用slider滑块创建图片对比”有了更深的了解，不妨来实际操作一番吧！这里是主机评测网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

上一篇：Android怎么自定义View实现风车效果

下一篇：TypeScript泛型推断怎么实现

---