本篇内容主要讲解“怎么使用slider滑块创建图片对比”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用slider滑块创建图片对比”吧!
先看效果
计算
安全
数据库
网络和加速
企业服务
.container {
position: relative;
}
.resizer {
background-color: #cbd5e0;
cursor: ew-resize;
height: 100%;
left: 50%;
position: absolute;
top: 0;
width: 2px;
}
.modified-image {
background-position: top left;
background-repeat: no-repeat;
background-size: auto 100%;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
filter: grayscale(100%);
}// Query the element
const resizer = document.getElementById('dragMe');
const leftSide = resizer.previousElementSibling;
const rightSide = resizer.nextElementSibling;
// The current position of mouse
let x = 0;
let y = 0;
let leftWidth = 0;
// Handle the mousedown event
// that's triggered when user drags the resizer
const mouseDownHandler = function (e) {
// Get the current mouse position
x = e.clientX;
y = e.clientY;
leftWidth = leftSide.getBoundingClientRect().width;
// Attach the listeners to `document`
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
// How far the mouse has been moved
const dx = e.clientX - x;
const dy = e.clientY - y;
let newLeftWidth =
((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';
};
const mouseUpHandler = 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');
// Remove the handlers of `mousemove` and `mouseup`
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
// Attach the handler
resizer.addEventListener('mousedown', mouseDownHandler);通过上面的示例可以看到，拖动中间的 slider 滑块，可以很清楚的看到图片的对比效果。
下面我们就来看看是如何实现的。
<div class="container">
<!-- 修改后的图 -->
<div class="modified-image"></div>
<!-- slider 滑块 -->
<div class="resizer" id="dragMe"></div>
<!-- 原图 -->
<img
src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/361d53f154ec41668a661d1d927f0c2e~tplv-k3u1fbpfcp-watermark.image?"
/>
</div>修改后的图放在底部，滑块在中间，原图在最上层。
.container {
position: relative;
}
.modified-image {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 50%;
}修改后的元素初始默认占据 50% 的宽度。
我们不使用 img 元素来显示修改后的图片，而是使用背景图方式显示，因为图片可以进行缩放。
<div
class="modified-image"
></div>因为使用背景图，所以修改后的图片元素需要设置更多样式，以达到最佳的显示效果。
.modified-image {
background-position: top left;
background-repeat: no-repeat;
background-size: auto 100%;
/* ... */
}为了达到对比的效果，我们还要给修改后的图片添加一层滤镜效果。
.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 元素的位置，以及修改后图片的大小。
const resizer = document.getElementById('dragMe');
// 上一个兄弟元素，也就是修改后的图片元素
const leftSide = resizer.previousElementSibling;
// 记录当前鼠标的位置
let x = 0;
let y = 0;
// 记录修改后图片的宽度
let leftWidth = 0;
// 点击 resizer 元素时触发 mousedown 事件
const mouseDownHandler = function (e) {
// 获取当前鼠标位置
x = e.clientX;
y = e.clientY;
leftWidth = leftSide.getBoundingClientRect().width;
// 在 document 元素上添加事件
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
// 计算鼠标移动距离
const dx = e.clientX - x;
const dy = e.clientY - y;
let newLeftWidth =
((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。
const mouseMoveHandler = function (e) {
// ...
newLeftWidth = Math.max(newLeftWidth, 0);
newLeftWidth = Math.min(newLeftWidth, 100);
};到此，相信大家对“怎么使用slider滑块创建图片对比”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
