当前位置：网站首页>鼠标滑动两张图片前后对比js插件

鼠标滑动两张图片前后对比js插件

2022-07-17 01:34:00 【我有一个蓝朋友】

需求：能拖动分割线查看两张图的前后对比效果。
话不多说，上代码！

html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>两张照片滑动前后对比js插件</title>
    <link rel="stylesheet" href="css/test.css" />
    <style> h1 {
       margin: 150px auto 30px; text-align: center; } </style>
  </head>
  <body>
    <h1>Before &lt; | &gt; After Slider Examples</h1>
    <div class="mainSection">
      <div id="one" class="bal-container">
        <div class="bal-after">
          <img src="img/1.jpg" />
          <div class="bal-afterPosition afterLabel">After</div>
        </div>
        <div class="bal-before">
          <div class="bal-before-inset">
            <img src="img/2.jpg" />
            <div class="bal-beforePosition beforeLabel">Before</div>
          </div>
        </div>
        <div class="bal-handle">
          <span class="handle-left-arrow"></span>
          <span class="handle-right-arrow"></span>
        </div>
      </div>
    </div>
    <script src="js/test.js"></script>
    <script> new BeforeAfter({
       id: "#one", }); </script>
  </body>
</html>

css：

* {
    
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.mainSection {
    
  width: 100%;
  height: 800px;
  display: flex;
  justify-content: center;
  align-content: center;
}
/* Before After Container */
.bal-container {
    
  width: 600px;
  height: 450px;
  position: relative;
  cursor: grab;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.bal-after {
    
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bal-before {
    
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  overflow: hidden;
}
.bal-before-inset {
    
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.bal-after img, .bal-before img {
    
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.bal-beforePosition {
    
  background: #121212;
  color: #fff;
  left: 0;
  pointer-events: none;
  border-radius: 0.2rem;
  padding: 2px 10px;
}
.bal-afterPosition {
    
  background: #121212;
  color: #fff;
  right: 0;
  pointer-events: none;
  border-radius: 0.2rem;
  padding: 2px 10px;
}
.beforeLabel {
    
  position: absolute;
  bottom: 0;
  margin: 1rem;
  font-size: 1em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.afterLabel {
    
  position: absolute;
  bottom: 0;
  margin: 1rem;
  font-size: 1em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
/* handle and arrow */
.bal-handle {
    
  height: 41px;
  width: 41px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -21px;
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 0 10px rgb(12, 12, 12);
}
.handle-left-arrow, .handle-right-arrow {
    
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}
.handle-left-arrow {
    
  border-right: 6px solid #fff;
  left: 50%;
  margin-left: -17px;
}
.handle-right-arrow {
    
  border-left: 6px solid #fff;
  right: 50%;
  margin-right: -17px;
}
.bal-handle::before {
    
  bottom: 50%;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgb(12, 12, 12);
}
.bal-handle::after {
    
  top: 50%;
  margin-top: 20.5px;
  box-shadow: 0 0 5px rgb(12, 12, 12);
}
.bal-handle::before, .bal-handle::after {
    
  content: " ";
  display: block;
  width: 2px;
  background: #fff;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
}

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 + "%;");
      }
    })
  }
}