2
如果在這裏，我們可以編寫和建立一個左右滑動頁面的網站。使用jQuery滑動和旋轉頁面網站
但首先讓我解釋一下這個概念。我們知道，一個網站是由很多頁面組成的。要將頁面導航到頁面，我們將用戶重定向到正確的URL並加載新頁面。我想要做的是避免加載時間，加載所有頁面，顯示用戶想要查看和隱藏其他頁面的頁面。
但爲什麼我要加載所有頁面??? 我想通過顯示一個頁面（活動頁面80％寬度/屏幕中心），右側下一頁的開始（下一頁10％寬度/右側）來創建最好的網站之一），前一頁的結尾（前一頁10％寬/左）。
你明白了嗎？好=）
我做了什麼： - 建立我們正在加載所有differentes頁（目前爲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);
}
我確實有一些bug修復，我真的不看看我的錯誤在哪裏...
所以如果有什麼好的開發者願意和我一起工作在這個很棒的模板上，那可能會很棒。 感謝您的閱讀，不要再問我更多的代碼。 乾杯