vue3.0 能拖动分割线查看两张图的前后对比效果(鼠标滑动两张图片前后对比)。

能拖动分割线查看两张图的前后对比效果(鼠标滑动两张图片前后对比)

来吧 展示 come on baby：
详细点开全屏看效果哦：

duiBi

html:

<template>
  <div class="mainSection">
      <div id="one" class="bal-container">
        <div class="bal-after">
          <img src="@/image/1.jpg" />
          <div class="bal-afterPosition afterLabel">修复前div>
        div>
        <div class="bal-before">
          <div class="bal-before-inset">
            <img src="@/image/2.png" />
            <div class="bal-beforePosition beforeLabel">修复后div>
          div>
        div>
        <div class="bal-handle">
          <span class="handle-left-arrow">span>
          <span class="handle-right-arrow">span>
        div>
      div>
    div>
template>

ts(typescript):

<script lang="ts" setup>
import {onMounted,ref} from "vue"
import BeforeAfter from '@/utils/beforafter'
onMounted(()=>{
  new BeforeAfter({
    id: "#one",
  });
})
</script>

src/utils/beforafter.js文件

class BeforeAfter {
  constructor(enteryObject) {
    const beforeAfterContainer = document.querySelector(enteryObject.id);
    const before = beforeAfterContainer.querySelector('.bal-before');
    const beforeText = beforeAfterContainer.querySelector('.bal-beforePosition');
    const afterText = beforeAfterContainer.querySelector('.bal-afterPosition');
    const handle = beforeAfterContainer.querySelector('.bal-handle');
    var widthChange = 0;
    beforeAfterContainer.querySelector('.bal-before-inset').setAttribute("style", "width: " + beforeAfterContainer.offsetWidth + "px;")
    window.onresize = function () {
      beforeAfterContainer.querySelector('.bal-before-inset').setAttribute("style", "width: " + beforeAfterContainer.offsetWidth + "px;")
    }
    before.setAttribute('style', "width: 50%;");
    handle.setAttribute('style', "left: 50%;");
    //touch screen event listener
    beforeAfterContainer.addEventListener("touchstart", (e) => {
      beforeAfterContainer.addEventListener("touchmove", (e2) => {
        let containerWidth = beforeAfterContainer.offsetWidth;
        let currentPoint = e2.changedTouches[0].clientX;
        let startOfDiv = beforeAfterContainer.offsetLeft;
        let modifiedCurrentPoint = currentPoint - startOfDiv;
        if (modifiedCurrentPoint > 10 && modifiedCurrentPoint < beforeAfterContainer.offsetWidth - 10) {
          let newWidth = modifiedCurrentPoint * 100 / containerWidth;
          before.setAttribute('style', "width:" + newWidth + "%;");
          afterText.setAttribute('style', "z-index: 1;");
          handle.setAttribute('style', "left:" + newWidth + "%;");
        }
      });
    });
    //mouse move event listener
    beforeAfterContainer.addEventListener('mousemove', (e) => {
      let containerWidth = beforeAfterContainer.offsetWidth;
      widthChange = e.offsetX;
      let newWidth = widthChange * 100 / containerWidth;

      if (e.offsetX > 10 && e.offsetX < beforeAfterContainer.offsetWidth - 10) {
        before.setAttribute('style', "width:" + newWidth + "%;");
        afterText.setAttribute('style', "z-index:" + "1;");
        handle.setAttribute('style', "left:" + newWidth + "%;");
      }
    })
  }
}

css:

为了方便大家，附前后对比图直接复制保存使用：