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

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

代码语言：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"&g.........完整代码请登录后点击上方下载按钮下载查看