Question

我正在尝试在jQuery中制作书籍翻转效果，例如this one

我认为使用jQuery会很容易，但是当我试图让页面变为效果时，我意识到这很复杂。

这就是我所拥有的：

SCRIPT：

<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并尝试在那里复制数学。然后它应该看起来几乎相同。

在jQuery中预订翻页

2 个答案: