jQuery+css实现百度百科的页面导航效果(3)

日期：2020-06-11 栏目：程序人生浏览：次

<div>
 content10,content10
 
 </div>
 <h2>
 <a></a>
 11
 part11
 </h2>

<div>
 content11,content11
 
 </div>
 <h2>
 <a></a>
 12
 part12
 </h2>

<div>
 content12,content12
 
 </div>
 <h2>
 <a></a>
 13
 part13
 </h2>

<div>
 content13,content13
 
 </div>
 <h2>
 <a></a>
 14
 part14
 </h2>

<div>
 content14,content14
 
 </div>
 <h2>
 <a></a>
 15
 part15
 </h2>

<div>
 content15,content15
 
 
 bottom
 </div>
</div>
<div>
 <div>
 <div>
 <div>
 <div></div>
 <div></div>
 </div>
 <div>
 <div title="向上翻页"></div>
 <div title="向下翻页"></div>
 </div>
 <div>
 <dl>
 <dd>
 1
 <a title="part1" href="#1">part1</a>
 
 </dd>
 <dd>
 2
 <a title="part2" href="#2">part2</a>
 
 </dd>
 <dd>
 2-1
 <a title="part2" href="#2-1">part2-1</a>
 
 </dd>
 <dd>
 2-2
 <a title="part2" href="#2-2">part2-2</a>
 
 </dd>
 <dd>
 3
 <a title="part3" href="#3">part3</a>
 
 </dd>
 <dd>
 4
 <a title="part4" href="#4">part4</a>
 
 </dd>
 <dd>
 5
 <a title="part5" href="#5">part5</a>
 
 </dd>
 <dd>
 6
 <a title="part6" href="#6">part6</a>
 
 </dd>
 <dd>
 7
 <a title="part7" href="#7">part7</a>
 
 </dd>
 <dd>
 8
 <a title="part8" href="#8">part8</a>
 
 </dd>
 <dd>
 9
 <a title="part9" href="#9">part9</a>
 
 </dd>
 <dd>
 10
 <a title="part10" href="#10">part10</a>
 
 </dd>
 <dd>
 11
 <a title="part11" href="#11">part11</a>
 
 </dd>
 <dd>
 12
 <a title="part12" href="#12">part12</a>
 
 </dd>
 <dd>
 13
 <a title="part13" href="#13">part13</a>
 
 </dd>
 <dd>
 14
 <a title="part14" href="#14">part14</a>
 
 </dd>
 <dd>
 15
 <a title="part15" href="#15">part15</a>
 
 </dd>
 </dl>
 </div>
 </div>
 <a href="javascript:void(0);"></a>
 <a title="返回顶部" href="javascript:void(0)"></a>
 </div>
</div>
</div>
<script type="text/javascript" src="https://www.jb51.net/jquery-1.7.2.js"></script>
<script>
 var slideInnerHeight = $('#sideCatalog-catalog dl').height();
 var slideOutHeight = $('#sideCatalog-catalog').height();
 var enableTop = slideInnerHeight - slideOutHeight;
 var step = 50;
 //点击向上的按钮
 $('#sideCatalog-down').bind('click', function () {
 if ($(this).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');
 } else {
 $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');
 $(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');
 }
 } else {
 return false;
 }
 })
 //点击向下的按钮
 $('#sideCatalog-up').bind('click', function () {
 if ($(this).hasClass('sideCatalog-up-enable')) {
 if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('top'))) > step) {
 $('#sideCatalog-catalog dl').stop().animate({'top': '+=' + step}, 'fast');
 $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
 } else {
 $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');
 $(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');
 }
 } else {
 return false;
 }
 })

转载注明出处：https://www.heiqu.com/wgxxxp.html

jQuery+css实现百度百科的页面导航效果(3)

相关推荐