Question

如果在这里，我们可以编码和构建一个左/右页滑动的网站。

但首先，让我解释一下这个概念。众所周知，网站由许多页面组成。要将页面导航到页面，我们将用户重定向到好的URL并加载新页面。我想要做的是避免这个加载时间，加载所有页面，显示用户想要看到的页面并隐藏其他页面。

但为什么我要加载所有页面??? 我想通过显示页面（活动页面80％宽度/屏幕中心）创建最好的网站之一，右侧下一页的开头（下一页10％宽度/右），上一页的结尾（上一页10％宽度/左）。

你明白了吗？好=）

我做了什么： - 构建一个索引页面，我们将加载所有不同的页面（目前为5） - 向所有这些页面添加类以检索id并使用它 - 使用滑动代码效果添加我的js函数

这是我的js功能。没有动画，一切都像这样工作：

/ *让流程先行 -------------------------------- * /

// When we are clicking on any element of the parent #navigation (the div)
// We are running this function 
// We are focusing this tag to get a list of all the pages
$('li.menu-item').live('click', function(event){

/* GET THE PAGE ID OF THE CLICKING ELEMENT 
-----------------------------*/
var page_id_target = event.target.id;

console.log("page id: "+page_id_target);

// this <> li.menu-item
var all_pages_menu = $('li.menu-item');
console.log(all_pages_menu);    

var pages_numbers = all_pages_menu.length;
console.log("Sum of pages: "+pages_numbers);    

//get the list of li menu
console.log("target class of the focus element: "+all_pages_menu[page_id_target-1].className);

//get the list of div
console.log($('#content .page'));

// Desactive all li class 
$('.page, .menu-item').removeClass('active').removeClass('next').removeClass('previous');
$('.page').addClass('hidden');

//Define the number id of the next page and the previous 
var next = parseInt(page_id_target)+1;
var previous = parseInt(page_id_target)-1;
    //  console.log("page_id_target: "+page_id_target);
    //  console.log("next: "+next);
    //  console.log("previous: "+previous);
if (page_id_target==1)
{
    //Update Menu
    $('ul#navigation #'+page_id_target).addClass('active');
    $('ul#navigation #'+next).addClass('next');
    $('ul#navigation #'+pages_numbers).addClass('previous');                        

    //Update DOM
    $('#content .'+page_id_target).addClass('active').removeClass('hidden');
    $('#content .'+next).addClass('next').removeClass('hidden');
    $('#content .'+pages_numbers).addClass('previous').removeClass('hidden');               
}

else if (page_id_target==pages_numbers)
{
    //Update Menu           
    $('ul#navigation #'+page_id_target).addClass('active');
    $('ul#navigation #'+1).addClass('next');
    $('ul#navigation #'+previous).addClass('previous');

    //Update DOM
    $('#content .'+page_id_target).addClass('active').removeClass('hidden');
    $('#content .'+1).addClass('next').removeClass('hidden');
    $('#content .'+previous).addClass('previous').removeClass('hidden');        
}

else
{
    //Update Menu
    $('ul#navigation #'+page_id_target).addClass('active');
    $('ul#navigation #'+next).addClass('next');
    $('ul#navigation #'+previous).addClass('previous');

    //Update DOM
    $('#content .'+page_id_target).addClass('active').removeClass('hidden');
    $('#content .'+next).addClass('next').removeClass('hidden');
    $('#content .'+previous).addClass('previous').removeClass('hidden');    
}

但是当我试图在我的函数中有一些动画时，例如：

            else
            {
                //Update Menu
                $('ul#navigation #'+page_id_target_right).addClass('active');
                $('ul#navigation #'+next_right).addClass('next');
                $('ul#navigation #'+previous_right).addClass('previous');



                /*
                // Update DOM
                // Work without Animations
                $('#content .'+page_id_target_right).addClass('active').removeClass('hidden');
                $('#content .'+next_right).addClass('next').removeClass('hidden');
                $('#content .'+previous_right).addClass('previous').removeClass('hidden');  
                */      

                // Retrieve the id of the previous old page 
                previous_right_old = previous_right-1;
                console.log("previous_right_old: "+previous_right_old);

                                /*  
                                    $('#content .'+page_id_target_right).addClass('hidden');
                                    $('#content .'+next_right).addClass('hidden');
                                    $('#content .'+previous_right).addClass('hidden');
                                    $('#content .'+previous_right_old).removeClass('hidden');

                                */

                // This is the old previous page
                // Set up the page on the left and the background (this is for initialise it, Otherwise the first the background won't follow)
                // Add the animate action to the left 
                // The size of one page is 78%
                // Adding the hiding class to let the page on the left (-151%)
                $('#content .'+previous_right_old).css({ 'left' : '-73%','background-color' : '#EAEAEA'}).animate({'left' : '-151%'}, duration, easing, function(){$('#content .'+previous_right_old).addClass('hidden')});

                // This is the previous page
                // Active to previous
                // Animate it 
                $('#content .'+previous_right).animate({'left' : '-73%', 'margin-right' : '0%', 'margin-left' : '0%', 'backgroundColor' : '#EFF0F1' }, duration, easing, function(){$('#content .'+previous_right).removeClass('hidden').addClass('previous')});                        



                // Add the left/right margin to respect the active class and attribute good classes after
                $('#content .'+page_id_target_right).animate({'left' : '5%', 'margin-right' : '6%', 'margin-left' : '6%', 'backgroundColor' : '#FFFFFF' }, duration, easing, function(){$('#content .'+page_id_target_right).addClass('active').removeClass('hidden')});

                // load the next page on the right of the screen
                // Adding the next class so the page will be correctly displaying
                // Set up the page on the right 
                // Animate it to the left with a page with of 78%
                $('#content .'+next_right).addClass('next').appendTo('#content').css({ 'left' : '173%', 'backgroundColor' : '#EFF0F1'}).animate({'left' : '95%'}, duration);



                            //animate previous to next
                            //$('#content .previous').css({ 'left' : '-73%'}).animate({'left' : '-151%'}, duration, easing, function(){$(this).remove();})
                            //.clone().addClass('next').removeClass('previous').appendTo('#content').css({ 'left' : '173%'}).animate({'left' : '95%'}, duration);               

            }

我确实有一些错误要修复，我真的不知道我的错误在哪里......

所以，如果有任何优秀的开发人员愿意在这个很棒的模板上与我合作，那可能会很棒。感谢您的阅读，并且不想再向我询问更多代码。干杯

Answer 1

我做了一个similar plugin，专门翻转到非顺序方式，所以它不显示上一个/下一个

它还允许上/下和淡入淡出效果

我为this website写了它这里是全屏翻转，但可以在任何容器中完成（这里是在身体上）

旨在允许每个页面状态的回调和动态内容加载

它还使用jquery.queue系统将所有移动列表放在fifo列表中并允许修剪无用的移动

所以，不完美，不是你真正想要的，但也许可以给你一些灵感，代码是创造性的共同3.0 by-nc-sa

使用jQuery滑动和旋转页面网站

1 个答案: