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;
     .........完整代码请登录后点击上方下载按钮下载查看