Question

抱歉，但我没有得到实际上我犯了错误的地方（因为我是javascript的新手）。我在教程的帮助下使用turn.js为flipbook效果编写了这段代码。但是浏览器中的输出只显示空白屏幕。我想，肯定有一个尴尬的错误，但仍然没有得到它。请帮助。

<html>
<head>

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="turn.js"></script>

<style type="text/css">
    body{
        background: #9988aa;
    }
    #book{
        width: 1152px;
        height: 400px;
    }
    #book .turn-page{
        background-color: #ddd;
        background-size: 100% 100%;
    }
</style>

</head>

<body>
<div id="book">
    <div style="background-image:url('images/1.jpg');"></div>
    <div style="background-image:url('images/2.jpg');"></div>
    <div style="background-image:url('images/3.jpg');"></div>
    <div style="background-image:url('images/4.jpg');"></div>
    <div style="background-image:url('images/5.jpg');"></div>
    <div style="background-image:url('images/6.jpg');"></div>
    <div style="background-image:url('images/7.jpg');"></div>
    <div style="background-image:url('images/8.jpg');"></div>
</div>

<script type="text/javascript">

    $(window).ready(function(){
        $('#book').turn({
            display:'double',
            acceleration: true,
            elevation:50;
        });
    });

    $(window).bind('keydown',function(e){
        if (e.keyCode==37)
            $('#book').turn('previous');
        else if (e.keyCode==39)
            $('#book').turn('next');
    });

</script>


</body>


</html>

Answer 1

您的代码中存在小错误，请从以下行中删除半冒号。

elevation:50;

应该如下，只需删除半冒号。希望它能解决你的问题。

$(window).ready(function(){
    $('#book').turn({
        display:'double',
        acceleration: true,
        elevation:50
    });
});

$(window).bind('keydown',function(e){
    if (e.keyCode==37)
        $('#book').turn('previous');
    else if (e.keyCode==39)
        $('#book').turn('next');
});

Turn.js（flipbook效果）不起作用

1 个答案: