Maison >
Article > interface Web > jQuery css implémente l'effet de navigation de page de Baidu Encyclopedia_jquery
jQuery css implémente l'effet de navigation de page de Baidu Encyclopedia_jquery
WBOYoriginal
2016-05-16 16:26:191325parcourir
J'ai accidentellement vu l'effet de navigation dans les pages de l'Encyclopédie Baidu cette semaine. Je l'ai trouvé plutôt bon, alors j'ai pris le temps d'écrire à ce sujet ce week-end.
L'image ci-dessous est le rendu de la partie navigation :
Les CSS et les images sont copiés depuis Baidu et peuvent être téléchargés depuis l'Encyclopédie Baidu.
<script><br>
var slideInnerHeight = $('#sideCatalog-catalog dl').height();<br>
var slideOutHeight = $('#sideCatalog-catalog').height();<br>
var activateTop = slideInnerHeight - slideOutHeight;<br>
var pas = 50 ;<br>
//点击向上的按钮<br>
$('#sideCatalog-down').bind('clic', function () {<br>
if ($(this).hasClass('sideCatalog-down-enable')) {<br>
if ((enableTop - Math.abs(parseInt($('#sideCatalog-catalog dl').css('top')))) > step) {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': '-=' step}, 'fast');<br>
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br>
} autre {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br>
$(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br>
><br>
} autre {<br>
retourner faux ;<br>
><br>
})<br>
//点击向下的按钮<br>
$('#sideCatalog-up').bind('clic', function () {<br>
if ($(this).hasClass('sideCatalog-up-enable')) {<br>
if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('top'))) > step) {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': ' =' step}, 'fast');<br>
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br>
} autre {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br>
$(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br>
><br>
} autre {<br>
retourner faux ;<br>
><br>
})</p>
<p> //点击导航中的各个目录<br>
$('#sideCatalog-catalog dl').delegate('dd', 'click', function (e) {<br>
var index = $(this).index();<br>
scrollSlide($(this), index);<br>
var ddId = $(this).find('a').stop().attr('href').substring(1);<br>
var windowTop = $('a[name="' ddId '"]').offset().top;<br>
$('body,html').animate({scrollTop: windowTop}, 'fast');<br>
$(this).addClass('heightlight').siblings('dd').removeClass('heightlight');<br>
})</p>
<p> //Faites défiler la page, c'est-à-dire faites défiler avec la barre de défilement<br>
$(document).scroll(function () {<br>
var len = $('.headline-1').length;<br>
pour (var i=len-1; i>=0; i--) {<br>
if ($(this).scrollTop() >= $('.headline-1').eq(i).offset().top - $('.headline-1').eq(i).height ()) {<br>
var index = i;<br>
$('#sideCatalog-catalog dl dd').eq(index).addClass('heightlight').siblings('dd').removeClass('heightlight');<br>
scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index);<br>
return false ;<br>
} autre {<br>
$('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');<br>
}<br>
><br>
})</p>
<p> //Défilement de la navigation, et affichage et masquage des boutons haut et bas<br>
Fonction scrollSlide(cela, index){<br>
Si (index < 5) {<br />
$('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br />
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br />
$('#sideCatalog-up').removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br />
} sinon si (index > 11) {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br>
$('#sideCatalog-down').removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br>
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br>
} autre {<br>
var dlTop = parseInt($('#sideCatalog-catalog dl').css('top')) slideOutHeight / 2 - (that.offset().top - $(document).scrollTop());<br>
$('#sideCatalog-catalog dl').stop().animate({'top': dlTop}, 'fast');<br>
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br>
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br>
><br>
><br>
</script>
Le grand site Web a le style d'un grand site Web. De nombreux effets sont produits et utilisés en premier. Les amis peuvent souvent faire du shopping et trouver facilement de bonnes choses
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
