liushengqiang
/
classroom-app


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="jquery.min.1.7.js"></script>
  <script type="text/javascript" src="turn.min.js"></script>
</head>

<body>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #filipbook {
      margin-top: 20px;
    }

    .animated {
      -webkit-transition: margin-left 0.2s ease-in-out;
      -moz-transition: margin-left 0.2s ease-in-out;
      -o-transition: margin-left 0.2s ease-in-out;
      -ms-transition: margin-left 0.2s ease-in-out;
      transition: margin-left 0.2s ease-in-out;
    }

    .page {
      background: white;

      -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      -ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      -o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    .shadow {
      -webkit-transition: -webkit-box-shadow 0.5s;
      -moz-transition: -moz-box-shadow 0.5s;
      -o-transition: -webkit-box-shadow 0.5s;
      -ms-transition: -ms-box-shadow 0.5s;
      -webkit-box-shadow: 0 0 20px #ccc;
      -moz-box-shadow: 0 0 20px #ccc;
      -o-box-shadow: 0 0 20px #ccc;
      -ms-box-shadow: 0 0 20px #ccc;
      box-shadow: 0 0 20px #ccc;
    }

    .even .gradient {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(./pics/right-border.png);
      background-position: right top;
      background-repeat: repeat-y;
    }

    .odd .gradient {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(./pics/left-border.png);
      background-position: left top;
      background-repeat: repeat-y;
    }

    .page-wrapper {
      -webkit-perspective: 2000px;
      -moz-perspective: 2000px;
      -ms-perspective: 2000px;
      perspective: 2000px;
    }
  </style>
  <div class="contianer">
    <div id="flipbook" class="animated">
      <div class="page">
        <img style="width: 100%; height: 100%; object-fit: cover;"
          src="https://oss.dayaedu.com/ktqy/169842014767727f10e9c.png" />
      </div>
      <div class="page">
        <div class="gradient"></div>2
      </div>
      <div class="page">
        <div class="gradient"></div>3
      </div>
      <div class="page">
        <div class="gradient"></div>4
      </div>
      <div class="page">
        <div class="gradient"></div>5
      </div>
      <div class="page">
        <div class="gradient"></div>6
      </div>
      <div class="page">
        <div class="gradient"></div>7
      </div>
      <div class="page">
        <div class="gradient"></div>8
      </div>
      <div class="page">
        <div class="gradient"></div>9
      </div>
      <div class="page">
        <div class="gradient"></div>10
      </div>
      <div class="page">
        <div class="gradient"></div>11
      </div>
    </div>
  </div>
  <script>
    $('#flipbook').turn({
      autoCenter: true,
      duration: 1000,
      acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
      pages: 11, // 页码总数
      elevation: 50, // 转换期间页面的高度
      width: window.screen.height * .8 * (3 / 4) * 2, // 宽度 单位 px
      height: window.screen.height * .8, // 高度 单位 px
      gradients: true, // 是否显示翻页阴影效果
      // display: 'single', //设置单页还是双页
    });
  </script>
</body>

</html>