Question

在turn.js中两个页面之间显示分隔符阴影的代码在哪里？我有点像新手，但我一直在挖这个，直到我晕了！有一段时间，我看到它有点闪过，但随后又消失了。这是代码：

    <!doctype html>
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<script type="text/javascript" src="js/jquery.min.1.7.js"></script>
<script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="js/turn.js"></script>
<style>
html, body {
    margin: 0;
    height: 100%;
}

body {
    background-color: #333;
}

body.hide-overflow {
    overflow: hidden;
}

/* helpers */

.t {
    display: table;
    width: 100%;
    height: 100%;
}

.tc {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.rel {
    position: relative;
}

/* book */

.book {
    margin: 0 auto;
    width: 90%;
    height: 90%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.book .page {
    height: 100%;
}

.book .page img {
    max-width: 100%;
    height: 100%;
}   
</style>
</head>
<body>


<div id="zoom-viewport" class="t">
    <div class="tc rel">
        <div class="book" id="book">
            <div class="page hard"><img src="../assets/img/book/0 Cover front.jpg" alt="" /></div>
            <div class="page hard"><img src="../assets/img/book/0 Cover front inside.jpg" alt="" /></div>
            <div class="page"><img src="../assets/img/book/1 Dedication and Animals-page-001.jpg" alt="" /></div>
            <div class="page"><img src="../assets/img/book/1 Dedication and Animals-page-002.jpg" alt="" /></div>
            <div class="page"><img src="../assets/img/book/1 Dedication and Animals-page-003.jpg" alt="" /></div>
            <div class="page"><img src="../assets/img/book/1 Dedication and Animals-page-004.jpg" alt="" /></div>
            <div class="page"><img src="../assets/img/book/1 Dedication and Animals-page-005.jpg" alt="" /></div>
            <div class="page"><img src="../assets/img/book/1 Dedication and Animals-page-006.jpg" alt="" /></div>
            <div class="page"><img src="../assets/img/book/1 Dedication and Animals-page-007.jpg" alt="" /></div>
            <div class="page"><img src="../assets/img/book/1 Dedication and Animals-page-008.jpg" alt="" /></div>
            <div class="page"><img src="../assets/img/book/1 Dedication and Animals-page-009.jpg" alt="" /></div>
            <div class="page"><img src="../assets/img/book/1 Dedication and Animals-page-010.jpg" alt="" /></div>
            <div class="page hard"><img src="../assets/img/book/0 Cover back inside.jpg" alt="" /></div>
            <div class="page hard"><img src="../assets/img/book/0 Cover back.jpg" alt="" /></div>
        </div>
    </div>
</div>

<script type="text/javascript">
/*
 * Turn.js responsive book
 */

/*globals window, document, $*/

(function () {
    'use strict';

    var module = {
        ratio: 1.38,
        init: function (id) {
            var me = this;

            // if older browser then don't run javascript
            if (document.addEventListener) {
                this.el = document.getElementById(id);
                this.resize();
                this.plugins();

                // on window resize, update the plugin size
                window.addEventListener('resize', function (e) {
                    var size = me.resize();
                    $(me.el).turn('size', size.width, size.height);
                });
            }
        },
        resize: function () {
            // reset the width and height to the css defaults
            this.el.style.width = '';
            this.el.style.height = '';

            var width = this.el.clientWidth,
                height = Math.round(width / this.ratio),
                padded = Math.round(document.body.clientHeight * 0.9);

            // if the height is too big for the window, constrain it
            if (height > padded) {
                height = padded;
                width = Math.round(height * this.ratio);
            }

            // set the width and height matching the aspect ratio
            this.el.style.width = width + 'px';
            this.el.style.height = height + 'px';

            return {
                width: width,
                height: height
            };
        },
        plugins: function () {
            // run the plugin
            $(this.el).turn({
                inclination: 50,
                gradients: true,
                acceleration: true
            });
            // hide the body overflow
            document.body.className = 'hide-overflow';
        }
    };

    module.init('book');
}());
</script>

</body>
</html>

Answer 1

经过几个小时的挖掘，结果发现它是脚本中的一个（另一个）错误。

事实证明，“gradients：true”选项仅在页面通过api动态加载时才有效，而不是在html中声明它们。但是，我仍然没有找到通过api加载硬封面并将其包含在html中的方法，因为文档说会创建页码问题！

缺少与turn.js的页面分隔符

1 个答案: