Почему демоверсия turn.js не работает?

Я могу запустить демонстрационный скрипт на скрипке, как это предусмотрено официальной документацией.

Но когда я скачал скрипт и открыл демоверсии, он не работает в моем браузере. На моей консоли нет ошибок.

Я попытался запустить тот же сценарий на скрипке в моем браузере, и на этот раз я получаю сообщение об ошибке. "Uncaught TypeError: Невозможно прочитать свойство 'style' для 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>
Источник

1 ответ

Решение

Потому что вы читаете элемент, прежде чем он находится на странице.

Либо переместите скрипт внизу тела, так что он находится после элемента, на который вы ссылаетесь, или используйте готовый документ

$(function(){    //document ready
    $("#flipbook").turn({
        width: 400,
        height: 300,
        autoCenter: true
    });
});
Источник
Другие вопросы по тегам