Переворачивание книги в jQuery

ProgramBox

Переворачивание книги в jQuery

Post author:admin
Запись опубликована:18 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Я пытаюсь создать эффект переворачивания книги в 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;
}

Я создал этот код для создания эффекта переворачивания, но если вы проверите его, вы увидите, что это сильно отличается от эффекта ссылки выше.

Я искал учебник в Интернете, но все, что я нашел, это плагины без какого-либо объяснения того, как это сделать.

Кто-нибудь может мне помочь о том, как создать эффект переворачивания книги?

Спасибо : )

Ответ №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
});

1. Большое спасибо за ответ. Я попробовал то, что вы сделали, но все еще не работает как переворачивание книги. В любом случае, буду продолжать думать о лучшем способе сделать это ; )

2. @Alan просто пытался дать вам основную идею, однако я внес некоторые изменения и добавил изображения на фотографиях (вместо того, чтобы просто использовать цвета). Я обновил ссылку на демонстрацию в сообщении. Теперь выглядит как вполне законная книга.

3. wdm, большое спасибо! Теперь эффект намного лучше ^_^ Я собираюсь заглянуть в код, чтобы понять, как вы это сделали : )

4. wdm, я немного улучшил два варианта твоего кода: 1. При первом переворачивании правой страницы изображение левой страницы меняется справа налево. 2. когда вы переворачиваете левую страницу, левая страница становится серой, а затем появляется изображение страницы. Благодаря вашему руководству я получил приятный эффект: jsfiddle.net/wazH8/2 . Плохо то, что эффект по-прежнему не похож на саму «книгу». Необходимо показывать левую страницу во время эффекта, когда вы переворачиваете правую страницу. Это будет сложно, но я собираюсь попробовать : ) Еще раз спасибо!

5. @Alan выглядит неплохо, я бы просто ускорил эффект. Я создал переменную delay в вашем коде здесь, чтобы вам было проще играть с этим параметром: jsfiddle.net/wdm954/wazH8/8

Ответ №2:

Вы могли бы взглянуть на исходный код демо-версии bookflip, на которую вы ссылались: coastworx.com/bookflip.js и попытайтесь воспроизвести математику там. Тогда это должно выглядеть практически так же.