创建图片对比slider滑块示例介绍_F11 - 专业站长和开发者的学习网站

分享到

创建图片对比slider滑块示例介绍

JavaScript 来源：互联网作者：佚名发布时间：2022-08-22 09:47:28 人浏览

摘要

引言在这篇文章，我们会创建一个 slider 滑块来对比两张图片。老样子，话不多说，先看效果。 CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 .container { position: relative; } .resizer { b

引言

在这篇文章，我们会创建一个 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: top left;

background-repeat: no-repeat;

background-size: auto 100%;

height: 100%;

left: 0;

position: absolute;

top: 0;

width: 50%;

filter: grayscale(100%);

}

JavaScript

// 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 滑块，可以很清楚的看到图片的对比效果。

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

定义 HTML 结构

<img

src="https://p3-juejin.byteimg.com/tos-cn-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 元素来显示修改后的图片，而是使用背景图方式显示，因为图片可以进行缩放。

<div

class="modified-image"

style="background-image: url('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/361d53f154ec41668a661d1d927f0c2e~tplv-k3u1fbpfcp-watermark.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 元素的位置，以及修改后图片的大小。

如何拖动一个元素其实很简单，还不是很清楚的同学可以去看看我之前的文章《如何实现一个自定义的 range slider？元素拖动其实很简单》。

接下来来看看

实际代码

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);

};

您可能感兴趣的文章 :

原文链接 : https://juejin.cn/post/7132101659819245598

Tag : 图片(70)滑块(6)

vue el-switch初始值(默认值)不能正确显示状态问题

el-switch 初始值（默认值）不能正确显示状态先去检查一下接口返回格式如果是字符串不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
微信小程序跳转外部链接的实现方法

微信小程序跳转外部链接在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接实现方法如下： 1、配置业务域
自己写一个uniapp全局弹窗(APP端)

效果图： uniapp自带的提示框不符合我们的要求，需要自己写一个提示框，且全局通用。解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听
JavaScript console对象与控制台使用介绍

1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 1 console.log(console); 2.
JavaScript错误处理机制全面分析介绍

1. Error 实例 JavaScript在运行错误时会抛出一个错误,JS提供了Error构造函数,所有抛出的错误都是这个构造函数的实例 1 2 const err = new Error(代码出
JavaScript Object.defineProperty与proxy代理模式的使用详

1. Object.defineProperty 1 2 const obj = {}; Object.defineProperty(obj,prop,descript); 参数 obj 要定义属性的对象 prop 要定义的属性 descript 属性描述符返回值
Javascript Object对象类型使用介绍

1. 生成方法对象是javaScript中的一种数据类型,它是key-value的合集，是无序的 1 2 3 4 const obj = { name: ian,age: 21}; //key使用变量 const gender = gender
JavaScript代码不能被阻断的稳定性建设

背景稳定性建设之JavaScript代码不能被阻断 js代码可能会因为某些原因，导致出错，进而整个后续代码有可能都被阻断。直接影响线上的稳定
JavaScript前端学算法题解LeetCode最大重复子字符串

最大重复子字符串给你一个字符串sequence，如果字符串word连续重复k次形成的字符串是sequence的一个子字符串，那么单词word的重复值为k。单
uni-app小程序沉浸式导航实现的全过程

项目要在多个页面上加自定义导航栏，还要有渐变效果，就是随着页面上滑，导航栏透明度由0逐渐变为1。这里面有几个基本点需要注意下。