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

代码语言:html

所属分类:拖放

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

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

网友评论0