2

如果在这里,我们可以编写代码并构建一个具有左右滑动页面的网站,那就太好了。

但首先,让我解释一下这个概念。众所周知,一个网站由许多页面组成。为了将页面导航到页面,我们将用户重定向到正确的 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);               

            }

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

因此,如果有任何优秀的开发人员愿意与我一起开发这个很棒的模板,那就太好了。感谢阅读,不要问我更多代码。干杯

4

1 回答 1

2

我做了一个类似的插件,专门用于翻转到非顺序方式,所以它不显示 prev/next

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

我为这个网站写的, 这里是全屏翻转,但可以在任何容器中完成(这里是在身体上)

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

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

所以,不完美,不是你真正想要的,但也许能给你一些启发,代码在 creative common 3.0 by-nc-sa 下

于 2012-12-26T17:48:09.383 回答