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:191322parcourir
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