ここで、左右にスライドするページを備えた Web サイトをコーディングして構築できれば、とても素晴らしいことです。
しかし、最初に、概念を説明させてください。ご存知のように、ウェブサイトは多くのページで構成されています。ページ間を移動するために、ユーザーを適切な URL にリダイレクトし、新しいページをロードしています。私がやりたいことは、この読み込み時間を回避し、すべてのページを読み込み、ユーザーが見たいページを表示し、他のページを非表示にすることです。
しかし、なぜすべてのページをロードしたいのですか??? ページを表示し (アクティブなページは幅 80%/画面の中央)、次のページの先頭は右側 (次のページは幅 10%/右) にすることで、最高の Web サイトの 1 つを作成したいと考えています。 、前のページの終わり (前のページ 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);
}
修正すべきバグがいくつかありますが、エラーがどこにあるのか本当にわかりません...
ですから、この素晴らしいテンプレートで私と一緒に仕事をしたいという優れた開発者がいれば、それは素晴らしいことです. 読んでくれてありがとう。もっとコードを尋ねたりしないでください。乾杯