1

我可以在 fiddle 上运行官方文档提供的演示脚本。

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

我尝试在浏览器中的小提琴上运行相同的脚本，这次我确实收到了错误。“未捕获的 TypeError：无法读取 null turn.js:184 的属性‘样式’”

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

<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>
4

1 回答 1

6

因为您在页面上之前正在阅读元素。

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

$(function(){    //document ready
    $("#flipbook").turn({
        width: 400,
        height: 300,
        autoCenter: true
    });
});
于 2014-04-03T12:14:10.953 回答