Köpeğim çomar ve arkadaşları için küçük bir sayfa hazırlamayı planlıyordum.. Ve bu sayfayı hazırlarken de dersini çekmeye karar verdim.. Derste yaptığımız şey, tam sayfa olmak üzere sayfalar arası animasyonlu geçiş.. Yararlı olması dileğiyle..
Sonradan Eklenenler;
Videoda kaldığı yerden devam etmeme hatası vardı.. Bunu aşağıdaki kod ile düzelttim;
/* otomatik olana gitsin */
setTimeout(function(){
indis = Math.ceil( $('body').scrollTop() / $.height() );
$('.solMenu ul li').removeClass('aktif').eq( indis ).addClass('aktif');
$('body').scrollTop( $.height() * indis );
}, 100);
Ve ek olarakta klavye aşağı ve yukarı yön tuşlarını kullanarakta geçiş yaptırdım.. Onlar içinde aşağıdaki kodları kullandım;
/* klavye yön tuşları hareketi */
$.oynat = function(e){
evt = e || window.event;
if ( evt.keyCode == 40 || evt.keyCode == 38 ) $('.solMenu ul li').removeClass('aktif');
/* Aşağı Yön Tuşu */
if ( evt.keyCode == 40 ){
if ( indis < $('.blok').length - 1 ) indis++;
$('.solMenu ul li:eq('+ indis +')').addClass('aktif');
$('html, body').stop().animate({
scrollTop: $.height() * indis
}, {
duration: 1000
});
}
/* Yukarı Yön Tuşu */
else if ( evt.keyCode == 38 ){
if ( indis > 0 ) indis--;
$('.solMenu ul li:eq('+ indis +')').addClass('aktif');
$('html, body').stop().animate({
scrollTop: $.height() * indis
}, {
duration: 1000
});
}
}
Tabi bu bir fonksiyon.. Body etiketine onkeydown=”$.oynat(event)” şeklinde olayı tanımladım.. Ve birde indis değişkenini genel tanımlayıp tıklamada ve klavye yön tuşlarında otomatik değerini değiştirdim ki nereden kaldıysa oradan devam edebilsin diye.. Kodları incelediğinizde zaten açık ve net görebilirsiniz.
İndir