Heim >Web-Frontend >js-Tutorial >jQuery CSS implementiert den Seitennavigationseffekt von Baidu Encyclopedia_jquery
jQuery CSS implementiert den Seitennavigationseffekt von Baidu Encyclopedia_jquery
WBOYOriginal
2016-05-16 16:26:191370Durchsuche
Ich habe diese Woche zufällig den Seitennavigationseffekt der Baidu-Enzyklopädie gesehen und fand ihn ziemlich gut, also habe ich mir am Wochenende die Zeit genommen, darüber zu schreiben.
Das Bild unten ist die Darstellung des Navigationsteils:
Das CSS und die Bilder werden von Baidu kopiert und können von der Baidu-Enzyklopädie heruntergeladen werden.
<script><br>
var slideInnerHeight = $('#sideCatalog-catalog dl').height();<br>
var slideOutHeight = $('#sideCatalog-catalog').height();<br>
var enableTop = slideInnerHeight - slideOutHeight;<br>
var step = 50;<br>
//点击向上的按钮<br>
$('#sideCatalog-down').bind('click', function () {<br>
if ($(this).hasClass('sideCatalog-down-enable')) {<br>
if ((enableTop - Math.abs(parseInt($('#sideCatalog-catalog dl').css('top')))) > Schritt) {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': '-=' step}, 'fast');<br>
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br>
} sonst {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br>
$(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br>
}<br>
} sonst {<br>
return false;<br>
}<br>
})<br>
//点击向下的按钮<br>
$('#sideCatalog-up').bind('click', 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>
} sonst {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br>
$(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br>
}<br>
} sonst {<br>
return false;<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> //Scrollen Sie durch die Seite, d. h. scrollen Sie mit der Bildlaufleiste<br>
$(document).scroll(function () {<br>
var len = $('.headline-1').length;<br>
for (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>
} sonst {<br>
$('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');<br>
}<br>
}<br>
})</p>
<p> //Scrollen der Navigation und Anzeigen und Ausblenden von Auf- und Ab-Schaltflächen<br>
Funktion scrollSlide(that, index){<br>
Wenn (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 />
} else if (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>
} sonst {<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>
Die große Website hat den Stil einer großen Website. Viele der Effekte werden von ihnen zuerst erstellt und verwendet. Freunde können oft einkaufen und leicht einige gute Dinge finden
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
