欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

創(chuàng)建圖片對(duì)比slider滑塊示例詳解

 更新時(shí)間：2022年08月17日 11:29:25   作者：西炒蛋  
這篇文章主要為大家介紹了創(chuàng)建圖片對(duì)比slider滑塊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

在這篇文章， 我們會(huì)創(chuàng)建一個(gè) slider 滑塊來(lái)對(duì)比兩張圖片。

老樣子，話不多說(shuō)，先看效果。

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

通過(guò)上面的示例可以看到，拖動(dòng)中間的 slider 滑塊，可以很清楚的看到圖片的對(duì)比效果。

下面我們就來(lái)看看是如何實(shí)現(xiàn)的。

定義 HTML 結(jié)構(gòu)

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

修改后的圖放在底部，滑塊在中間，原圖在最上層。

定義 CSS 樣式

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

修改后的元素初始默認(rèn)占據(jù) 50% 的寬度。

我們不使用 img 元素來(lái)顯示修改后的圖片，而是使用背景圖方式顯示，因?yàn)閳D片可以進(jìn)行縮放。

<div
  class="modified-image"
  style="background-image: url('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/361d53f154ec41668a661d1d927f0c2e~tplv-k3u1fbpfcp-watermark.image?')"
></div>

因?yàn)槭褂帽尘皥D，所以修改后的圖片元素需要設(shè)置更多樣式，以達(dá)到最佳的顯示效果。

.modified-image {
  background-position: top left;
  background-repeat: no-repeat;
  background-size: auto 100%;
  /* ... */
}

為了達(dá)到對(duì)比的效果，我們還要給修改后的圖片添加一層濾鏡效果。

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

接下來(lái)設(shè)置 .resizer 元素的樣式，相對(duì)而言要簡(jiǎn)單很多，只需要將它設(shè)置到中心位置即可。

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

使用 position 屬性將它定為到中間，注意將鼠標(biāo)的展現(xiàn)形式更換為 cursor: ew-resize。

HTML 結(jié)構(gòu)和 CSS 樣式就差不多了，接下來(lái)處理 JavaScript 事件相關(guān)內(nèi)容。

當(dāng)我們移動(dòng) .resizer 元素時(shí)，需要事實(shí)計(jì)算鼠標(biāo)移動(dòng)了多遠(yuǎn)的距離。然后根據(jù)當(dāng)前鼠標(biāo)的位置，修改 .resizer 元素的位置，以及修改后圖片的大小。

如何拖動(dòng)一個(gè)元素其實(shí)很簡(jiǎn)單，還不是很清楚的同學(xué)可以去看看我之前的文章 《如何實(shí)現(xiàn)一個(gè)自定義的 range slider？元素拖動(dòng)其實(shí)很簡(jiǎn)單》。

接下來(lái)來(lái)看看

實(shí)際代碼

const resizer = document.getElementById('dragMe');
// 上一個(gè)兄弟元素，也就是修改后的圖片元素
const leftSide = resizer.previousElementSibling;
// 記錄當(dāng)前鼠標(biāo)的位置
let x = 0;
let y = 0;
// 記錄修改后圖片的寬度
let leftWidth = 0;
// 點(diǎn)擊 resizer 元素時(shí)觸發(fā) mousedown 事件
const mouseDownHandler = function (e) {
  // 獲取當(dāng)前鼠標(biāo)位置
  x = e.clientX;
  y = e.clientY;
  leftWidth = leftSide.getBoundingClientRect().width;
  // 在 document 元素上添加事件
  document.addEventListener('mousemove', mouseMoveHandler);
  document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
  // 計(jì)算鼠標(biāo)移動(dòng)距離
  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);
  // 設(shè)置修改后的圖片元素的寬度
  leftSide.style.width = `${newLeftWidth}%`;
  resizer.style.left = `${newLeftWidth}%`;
};
// 給 resizer 元素添加事件
resizer.addEventListener('mousedown', mouseDownHandler);

代碼有點(diǎn)長(zhǎng)，需要你花點(diǎn)時(shí)間仔細(xì)看看才能理解。

最后還有一個(gè)需要注意的點(diǎn)，我們要保證鼠標(biāo)滑塊不會(huì)滑出可視范圍，所以需要限制其最大值和最小值。

因?yàn)樾薷暮蟮膱D片元素的寬度值時(shí)百分比類型，所以最小值為 0，最大值為 100。

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

以上就是創(chuàng)建圖片對(duì)比slider滑塊示例詳解的詳細(xì)內(nèi)容，更多關(guān)于圖片對(duì)比slider滑塊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • 前端JavaScript大管家 package.json

    前端JavaScript大管家 package.json

    這篇文章主要介紹了前端JavaScript大管家 package.json，在每個(gè)前端項(xiàng)目中，都有package.json文件，它是項(xiàng)目的配置文件，常見(jiàn)的配置有配置項(xiàng)目啟動(dòng)、打包命令，聲明依賴包等，下面我們就來(lái)學(xué)習(xí) package.json的詳細(xì)內(nèi)容,需要的朋友可以參考一下
    2021-10-10
  • 微信小程序 兩種滑動(dòng)方式（橫向滑動(dòng)，豎向滑動(dòng)）詳細(xì)及實(shí)例代碼

    微信小程序 兩種滑動(dòng)方式（橫向滑動(dòng)，豎向滑動(dòng)）詳細(xì)及實(shí)例代碼

    這篇文章主要介紹了微信小程序 兩種滑動(dòng)方式詳細(xì)及實(shí)例代碼的相關(guān)資料,這里對(duì)橫向滑動(dòng)和豎向滑動(dòng)都做介紹，需要的朋友可以參考下
    2017-01-01
  • 微信小程序 開(kāi)發(fā)指南詳解

    微信小程序 開(kāi)發(fā)指南詳解

    這篇文章主要介紹了微信小程序 開(kāi)發(fā)指南詳解的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • Three.js?Interpolant實(shí)現(xiàn)動(dòng)畫插值

    Three.js?Interpolant實(shí)現(xiàn)動(dòng)畫插值

    這篇文章主要為大家介紹了Three.js?Interpolant實(shí)現(xiàn)動(dòng)畫插值示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-02-02
  • 判斷Spartacus?SSR的Transfer?State是否正常工作技巧

    判斷Spartacus?SSR的Transfer?State是否正常工作技巧

    這篇文章主要為大家介紹了判斷Spartacus?SSR的Transfer?State是否正常工作技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-10-10
  • TypeScript基礎(chǔ)類型介紹

    TypeScript基礎(chǔ)類型介紹

    這篇文章主要介紹了TypeScript基礎(chǔ)類型，布爾值、數(shù)字、字符串、任意類型等多種類型，下面我們就來(lái)看看這些類型的詳細(xì)介紹,需要的朋友可以參考一下，希望對(duì)你有所幫助
    2021-12-12
  • JQ中$(window).load和$(document).ready區(qū)別與執(zhí)行順序

    JQ中$(window).load和$(document).ready區(qū)別與執(zhí)行順序

    JQ中的$(document).ready()大家應(yīng)該用的非常多，基本每個(gè)JS腳本中都有這個(gè)函數(shù)的出現(xiàn)有時(shí)甚至?xí)霈F(xiàn)多個(gè)，那么另一個(gè)加載函數(shù)$(window).load相對(duì)出現(xiàn)的次數(shù)就很少了，下面為大家介紹一下兩者的區(qū)別與他們的執(zhí)行順序
    2017-03-03
  • 使用HTTP?Referer實(shí)現(xiàn)圖片防盜圖文示例詳解

    使用HTTP?Referer實(shí)現(xiàn)圖片防盜圖文示例詳解

    這篇文章主要為大家介紹了使用HTTP?Referer實(shí)現(xiàn)圖片防盜圖文示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • 微信小程序 教程之?dāng)?shù)據(jù)綁定

    微信小程序 教程之?dāng)?shù)據(jù)綁定

    這篇文章主要介紹了微信小程序 數(shù)據(jù)綁定的相關(guān)資料,并附實(shí)例代碼，需要的朋友可以參考下
    2016-10-10
  • 詳解requestAnimationFrame和setInterval該如何選擇

    詳解requestAnimationFrame和setInterval該如何選擇

    這篇文章主要為大家介紹了requestAnimationFrame和setInterval該如何選擇示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
    2023-03-03

最新評(píng)論