在jQuery中翻书

Question

我正试着像this one一样，在jQuery中制作翻书效果

我原以为使用jQuery会很容易，但当我试图实现翻页效果时，我意识到这是相当复杂的。

这就是我所拥有的：

脚本：

<script type="text/javascript">

    $(document).ready(function() {

        $('#s').click(function(){

            $('#flippage_0').animate({'width': '0'}, "fast", function(){
                $('#flippage_1').animate({'left': '0'}, "fast");
            });

        });

    });

</script>

HTML：

<body>

<div id="s" style="width:20px;height:20px;background-color:black;"></div>

<div id="book">
    <div id="flippage_0" class="flippage" >
        <div id="fliphtml_0" class="fliphtml" style="background-image:url('page0.jpg');z-index:3;">
        </div>
    </div>
    <div id="flippage_1" class="flippage">
        <div id="fliphtml_1" class="fliphtml" style="background-image:url('page1.jpg');z-index:2">
        </div>
    </div>
    <div id="flippage_2" class="flippage">
        <div id="fliphtml_2" class="fliphtml" style="background-image:url('page2.jpg');z-index:1">
        </div>
    </div>
</div>

</body>

CSS：

#book{

    background: none repeat scroll 0 0 grey;
    border-color: grey;
    border-style: outset;
    border-width: 2px 5px 3px 2px;
    height: 361px;
    position: relative;
    width: 600px;
    z-index: 0; 
}

.flippage{
    height: 361px;
    left: 300px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 300px;

}

.fliphtml{
    border-color: #000000;
    border-style: solid;
    border-width: 0;
    color: #FFFFFF;
    height: 361px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 300px;
}

我写了这段代码来制作翻转效果，但如果你检查它，你会发现这与上面链接的效果有很大不同。

我在互联网上搜索了一个教程，但我找到的都是插件，没有任何关于如何制作它的解释。

有没有人能帮我把书翻过来？

谢谢：)

Answer 1

看看它是不是更像你想要的……

演示：http://jsfiddle.net/wdm954/DkZsY/2/

编辑:我的原始代码更基本，但我也做了一些工作，并添加了反向翻页功能。

$('.flippage').click(function(){

    $this = $(this);

    if ($(this).css('left') == '0px') {

            $(this).animate({ width: '0px', left: '300px' }, 100, function(){
                $this.next().width('0px').animate({
                    width: '300px'
                }, 150);
                $this.prev().animate({ width: '300px' }, 100);
                // replace left side with background
                $bg = $this.nextAll().eq(1).children('span').css('backgroundImage');
                $('#book').css('backgroundImage', $bg);

                $this.nextAll().eq(1).animate({
                    left: '0px',
                    width: '300px'
                }, 100, function() {
                    $('#book').css('backgroundImage', 'none');
                });
            });
    }
    else {

        if ($this.index() == 0) {
            //if last page (technically first div) then do nothing
        }
        else {
            $(this).animate({ width: '0px' }, 100, function(){
                $this.prev().width('1px').animate({
                    left: '0px',
                    width: '300px'
                }, 100);
                $this.next().animate({ width: '0px' }, 100);
            });
        }
    }// end else
});

Answer 2

您可以查看链接到的bookflip演示程序的源代码: coastworx.com/bookflip.js，并尝试在其中复制数学知识。那么它看起来应该是差不多的。