jQuery css implements the page navigation effect of Baidu Encyclopedia_jquery
WBOY
Release： 2016-05-16 16:26:19
Original
1335 people have browsed it
I accidentally saw the page navigation effect of Baidu Encyclopedia this week. I thought it was quite good, so I took the time to write about it over the weekend.
The picture below is the rendering of the navigation part:
The css and images are copied from Baidu and can be downloaded from Baidu Encyclopedia.
<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')))) > step) {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': '-=' step}, 'fast');<br>
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br>
} else {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br>
$(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br>
}<br>
} else {<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>
} else {<br>
$('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br>
$(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br>
}<br>
} else {<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> //Scroll the page, that is, scroll with the scroll bar<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>
} else {<br>
$('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');<br>
}<br>
}<br>
})</p>
<p> //Scrolling of navigation, and display and hiding of up and down buttons<br>
Function scrollSlide(that, index){<br>
If (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>
} else {<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>
The big website has the style of a big website. Many of the effects are produced and used first. Friends can go shopping often and find some good things easily
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
