jQuery css melaksanakan kesan navigasi halaman Baidu Encyclopedia_jquery
WBOYasal
2016-05-16 16:26:191325semak imbas
Saya secara tidak sengaja melihat kesan navigasi halaman Ensiklopedia Baidu minggu ini, saya fikir ia agak bagus, jadi saya meluangkan masa untuk menulis mengenainya pada hujung minggu.
Gambar di bawah ialah pemaparan bahagian navigasi:
Css dan imej disalin daripada Baidu dan boleh dimuat turun daripada Ensiklopedia Baidu.
var slideInnerHeight = $('#sideCatalog-catalog dl').height();
var slideOutHeight = $('#sideCatalog-catalog').height();
var enableTop = slideInnerHeight - slideOutHeight;
var step = 50;
//点击向上的按钮
$('#sideCatalog-down').bind('click', function () {
jika ($(ini).hasClass('sideCatalog-down-enable')) {
if ((enableTop - Math.abs(parseInt($('#sideCatalog-catalog dl').css('top')))) > step) {
$('#sideCatalog-catalog dl').stop().animate({'top': '-=' step}, 'fast');
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
} lain {
$('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');
$(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');
}
} lain {
pulangkan palsu;
}
})
//点击向下的按钮
$('#sideCatalog-up').bind('click', function () {
jika ($(ini).hasClass('sideCatalog-up-enable')) {
if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('atas'))) > step) {
$('#sideCatalog-catalog dl').stop().animate({'top': ' =' step}, 'fast');
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
} lain {
$('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');
$(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');
}
} lain {
pulangkan palsu;
}
})
//点击导航中的各个目录
$('#sideCatalog-catalog dl').delegate('dd', 'click', function (e) {
var indeks = $(this).index();
scrollSlide($(this), index);
var ddId = $(this).find('a').stop().attr('href').substring(1);
var windowTop = $('a[name="' ddId '"]').offset().top;
$('body,html').animate({scrollTop: windowTop}, 'fast');
$(this).addClass('heightlight').siblings('dd').removeClass('heightlight');
})
//Tatal halaman, iaitu tatal dengan bar tatal
$(dokumen).skrol(fungsi () {
var len = $('.headline-1').length;
untuk (var i=len-1; i>=0; i--) {
jika ($(ini).scrollTop() >= $('.headline-1').eq(i).offset().atas - $('.headline-1').eq(i).height ()) {
indeks var = i;
$('#sideCatalog-catalog dl dd').eq(index).addClass('heightlight').adik-beradik('dd').removeClass('heightlight');
scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index);
pulangan palsu;
} lain {
$('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');
}
}
})
//Tatal navigasi, dan paparan serta penyembunyian butang atas dan bawah
Fungsi tatalSlide(itu, indeks){
Jika (indeks < 5) {
$('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
$('#sideCatalog-up').removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');
} jika tidak (indeks > 11) {
$('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');
$('#sideCatalog-down').removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
} lain {
var dlTop = parseInt($('#sideCatalog-catalog dl').css('top')) slideOutHeight / 2 - (that.offset().top - $(document).scrollTop());
$('#sideCatalog-catalog dl').stop().animate({'top': dlTop}, 'fast');
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
}
}
Tapak web besar mempunyai gaya laman web besar yang dihasilkan dan digunakan oleh mereka terlebih dahulu. Rakan-rakan boleh pergi membeli-belah dan mencari beberapa perkara yang baik dengan mudah
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
