css+js实现三张图片堆叠分层拖拽对比效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：css+js实现三张图片堆叠分层拖拽对比效果代码，三层图片对比。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">


    <style>

        #page{
          width:100%;
          height:100%;
          position:absolute;
          background:#eee;
        }
        /* Our normalize css */
        *{
          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;
        }
        
        /* Our wrapper */
        .wrapper{
          width: 690px;
          height: 600px;
          max-height:100vh;
          position: absolute;
          left:50%;
          top:50%;
          transform:translate3d(-50%,-50%,0);
          overflow:hidden;
          box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        }
        
        
        /* Our image information */
        .bottom,
        .middle,
        .top {
          width:100%;
          height:100%;
          background-repeat:no-repeat;
          background-color: white;
          background-size: cover;
          background-position: center;
          position: absolute;
          top:0;
          left:0;
          pointer-events:none;
          overflow: hidden;
          &>img{
            height:100%;
          }
        }
        
        .top{
          width:125px;
        }
        
        .scroller{
          width: 50px;
          height:50px;
          position: absolute;
          left:100px;
          top:50%;
          transform:translateY(-50%);
          border-radius:50%;
          background-color: #fff;
          opacity:0.9;
          transition: opacity 0.12s ease-in-out;
          pointer-events:auto;
          cursor: pointer;
          box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
        }
        .scroller-middle{
          margin-top:25px;
        }
        .scroller-top{
          margin-top:-25px;
        }
        
        
        .scroller:hover{
          opacity:1;
        }
        
        .scrolling{
          pointer-events:none;
          opacity:1;
          // z-index: 1;
        }
        
        .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;
          z-index: 30;
          transition:0.1s;
          box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
        }
        .scroller:before{
          top:49px;
        }
        .scroller:after{
          bottom:49px;
        }
        
        /* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
        .scroller-middle>.scroller__thumb{
          border: 5px solid #FFCCBC;
        }
        .scroller-middle:before,
        .scroller-middle:after{
          background: #FFCCBC;
        }
        
        .scroller-top>.scroller__thumb{
          border: 5px solid #FFAB91;
        }
        .scroller-top:before,
        .scroller-top:after{
          background: #FFAB91;
        }
    </style>
</head>

<body>

    <div id="page">
        <div class="wrapper">
            <div class="bottom"> <img src="//repo.bfw.wiki/bfwrepo/images/head/2eo86ew.jpg" draggable="false"> </div>
            <div class="middle"> <img src="//repo.bfw.wiki/bfwrepo/images/head/15i68sz.jpg" draggable="false"> </div>
            <div class="scroller scroller-middle">
       <svg class="scroller__thumb" xmlns="http://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:#FFCCBC">
        <polygon points="100 50 64 32 64 68 100 50" style="fill:#FFCCBC">
      </svg>
            </div>
            <div class="top"> <img src="//repo.bfw.wiki/bfwrepo/images/head/2ppni55.jpg" draggable="false"> </div>
            <div class="scroller scroller-top">
                <svg class="scroller__thumb" xmlns="http://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>
    </div>

    <script>
        // I hope this over-commenting helps. Let's do this!
        // Let's use the 'active' variable to let us know when we're using it
        let active = false;
        // and define our dom elements to make it easier to read
        let scrollerMiddle = document.querySelector('.scroller-middle');
        let scrollerTop = document.querySelector('.scroller-top');
        
        
        // First we'll have to set up our event listen.........完整代码请登录后点击上方下载按钮下载查看