html 图片处理前后 滑动效果 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* You can remove this page div in your website */

* {
    margin: 0;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.wrapper {
    width: 100%;
    height: 100%;
    /* height: 600px;
    max-height: 100vh; */
    position: absolute;
    overflow: hidden;
}

.bottom,
.top {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}
.scroller {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 100px;
    top: 50%;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}
.scroller-top {
    margin-top: -25px;
}

.scroller__thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 7px;
}
.scroller:before,
.scroller:after {
    content: " ";
    display: block;
    width: 7px;
    height: 9999px;
    position: absolute;
    left: 50%;
    margin-left: -3.5px;
}
.scroller:before {
    top: 49px;
}
.scroller:after {
    bottom: 49px;
}

.scroller-top>.scroller__thumb {
    border: 5px solid #FFAB91;
}
.scroller-top:before,
.scroller-top:after {
    background: #FFAB91;
}
.imgcommon {
      width: 100%;
      height: 100%;
    }
  </style>

  <script>
let active = false;

function scrollIt(x) {
  let transform = Math.max(0, (Math.min(x, document.querySelector('.wrapper').offsetWidth)));
  // document.querySelector('.top').style.width = transform + "px";
  document.querySelector('.top').style.clipPath = `polygon(0% 0, ${ transform + "px"} 0, ${ transform + "px"} 100%, 0 100%)`;
  document.querySelector('.scroller-top').style.left = transform - 25 + "px";
}

function releaseMouse(){
  active = false;
}
function captureMouse(){
  active = true;
}

window.onload=function(){
  // We'll have to do the same for our top scroller
  document.querySelector('.scroller-top').addEventListener('mousedown', captureMouse);
  document.body.addEventListener('mouseup', releaseMouse);
  document.body.addEventListener('mouseleave', releaseMouse);
  document.body.addEventListener('touchend', releaseMouse);
document.body.addEventListener('touchcancel', releaseMouse);

  // Let's figure out where their mouse is at
  document.body.addEventListener('mousemove', function(e) {
      if (!active) return;
      // Their mouse is here...
      let x = e.pageX;
      // but we want it relative to our wrapper
      x -= document.querySelector('.wrapper').getBoundingClientRect().left;
      // Okay let's change our state
      scrollIt(x);
  });
  document.querySelector('.scroller-top').addEventListener('touchstart', captureMouse, { passive: true });

document.querySelector('.wrapper').addEventListener('touchmove', function(e) {
    if (!active) return;
    e.preventDefault();
    let x = e.touches[0].pageX;
    x -= document.querySelector('.wrapper').getBoundingClientRect().left;
    scrollIt(x);
}, { passive: true });

  scrollIt(460);
  active = false;
};

  </script>
</head>

<body>
    <div class="wrapper">
        <div class="bottom">
            <img src="./a.jpg" draggable="false" class="imgcommon" />
        </div>
        <div class="top">
            <img src="./test.png" draggable="false" class="imgcommon"/>
        </div>
        <div class="scroller scroller-top">
            <svg class="scroller__thumb" xmlns="https://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" >
                <polygon points="0 50 37 68 37 32 0 50" style="fill:#FFAB91" />
                <polygon points="100 50 64 32 64 68 100 50" style="fill:#FFAB91" />
            </svg>
        </div>
    </div>
</body>

</html>

posted @ 2023-11-22 21:12  Hey,Coder!  阅读(20)  评论(0)  编辑  收藏  举报