Question

我可以在demo提供的小提琴上运行official documentation脚本。

但是当我下载脚本并打开演示时，它并不适用于我的浏览器。我的控制台上没有错误。

我尝试在浏览器中运行相同的脚本，这次我收到错误。＆＃34; Uncaught TypeError：无法读取属性＆＃39; style＆＃39; null turn.js：184＆＃34;

我不太明白。这是我使用的代码。

<html>

    <head>
        <script type="text/javascript" src="includes/jquery-1.11.0.js"></script>
        <script type="text/javascript" src="includes/turn.js"></script>
        <script>
            $("#flipbook").turn({
                width: 400,
                height: 300,
                autoCenter: true
            });
        </script>
        <style>
            body{
                overflow:hidden;
            }

            #flipbook{
                width:400px;
                height:300px;
            }

            #flipbook .page{
                width:400px;
                height:300px;
                background-color:white;
                line-height:300px;
                font-size:20px;
                text-align:center;
            }

            #flipbook .page-wrapper{
                -webkit-perspective:2000px;
                -moz-perspective:2000px;
                -ms-perspective:2000px;
                -o-perspective:2000px;
                perspective:2000px;
            }

            #flipbook .hard{
                background:#ccc !important;
                color:#333;
                -webkit-box-shadow:inset 0 0 5px #666;
                -moz-box-shadow:inset 0 0 5px #666;
                -o-box-shadow:inset 0 0 5px #666;
                -ms-box-shadow:inset 0 0 5px #666;
                box-shadow:inset 0 0 5px #666;
                font-weight:bold;
            }

            #flipbook .odd{
                background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
                background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
                background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
                background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
                background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
                background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
                -webkit-box-shadow:inset 0 0 5px #666;
                -moz-box-shadow:inset 0 0 5px #666;
                -o-box-shadow:inset 0 0 5px #666;
                -ms-box-shadow:inset 0 0 5px #666;
                box-shadow:inset 0 0 5px #666;

            }

            #flipbook .even{
                background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
                background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
                background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
                background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
                background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
                background-image:linear-gradient(left, #fff 95%, #dadada 100%);
                -webkit-box-shadow:inset 0 0 5px #666;
                -moz-box-shadow:inset 0 0 5px #666;
                -o-box-shadow:inset 0 0 5px #666;
                -ms-box-shadow:inset 0 0 5px #666;
                box-shadow:inset 0 0 5px #666;
            }
        </style>
    </head>

    <body>

        <div id="flipbook">
            <div class="hard"> Turn.js </div> 
            <div class="hard"></div>
            <div> Page 1 </div>
            <div> Page 2 </div>
            <div> Page 3 </div>
            <div> Page 4 </div>
            <div class="hard"></div>
            <div class="hard"></div>
        </div>



    </body>

</html>

Answer 1

因为您正在阅读该页面上的元素。

将脚本移动到正文的底部，使其位于您引用的元素之后或使用文档就绪

$(function(){    //document ready
    $("#flipbook").turn({
        width: 400,
        height: 300,
        autoCenter: true
    });
});

为什么不转.js演示工作？

1 个答案: