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://gyt.ks3-cn-beijing.ksyuncs.com/1688969499129.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>