jquery类似百度百科底部导航预览，代码很简单，这里就不多废话了。
效果图：
CSS
* { margin: 0; padding: 0 } .wrap { width: 1000px; overflow: hidden; margin: 0 auto; } .content { width: 780px; float: left; } .slide { width: 200px; float: right; }
HTML
<div> <div> <h2> <a name="1"></a> <span>1</span> <span>part1</span> </h2> <div> content1,content1 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="2"></a> <span>2</span> <span>part2</span> </h2> <div> content2,content2 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="2-1"></a> <> <span>part2-1</span> </h2> <div> content2-1,content2-1 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="2-2"></a> <> <span>part2-2</span> </h2> <div> content2-2,content2-2 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="3"></a> <span>3</span> <span>part3</span> </h2> <div> content,content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="4"></a> <span>4</span> <span>part4</span> </h2> <div> content,content <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="5"></a> <span>5</span> <span>part5</span> </h2> <div> content5,content5 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="6"></a> <span>6</span> <span>part6</span> </h2> <div> content6,content6 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="7"></a> <span>7</span> <span>part7</span> </h2> <div> content7,content7 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="8"></a> <span>8</span> <span>part8</span> </h2> <div> content8,content8 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="9"></a> <span>9</span> <span>part9</span> </h2> <div> content9,content9 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="10"></a> <span>10</span> <span>part10</span> </h2> <div> content10,content10 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="11"></a> <span>11</span> <span>part11</span> </h2> <div> content11,content11 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="12"></a> <span>12</span> <span>part12</span> </h2> <div> content12,content12 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="13"></a> <span>13</span> <span>part13</span> </h2> <div> content13,content13 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="14"></a> <span>14</span> <span>part14</span> </h2> <div> content14,content14 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <h2> <a name="15"></a> <span>15</span> <span>part15</span> </h2> <div> content15,content15 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> bottom </div> </div> <div> <div id="sideToolbar"> <div id="sideCatalog"> <div id="sideCatalog-sidebar"> <div></div> <div></div> </div> <div id="sideCatalog-updown"> <div id="sideCatalog-up" title="向上翻页"></div> <div id="sideCatalog-down" title="向下翻页"></div> </div> <div id="sideCatalog-catalog"> <dl> <!-- <dd id="sideToolbar-item-0-1"> <span>1</span> <a title="part1" href="#1">part1</a> <span></span> </dd> <dd id="sideToolbar-item-0-2"> <span>2</span> <a title="part2" href="#2">part2</a> <span></span> </dd> <dd id="sideToolbar-item-0-2-1"> <span>2-1</span> <a title="part2" href="#2-1">part2-1</a> <span></span> </dd> --> </dl> </div> </div> <a id="sideCatalogBtn" href="javascript:void(0);"></a> <a id="sideToolbar-up" title="返回顶部" href="javascript:void(0)"></a> </div> </div> </div>
JS
<script> var allEle = $(':header[class*="headline"]'); var headLen = allEle.length; var ddArr = []; //根据页面内容生成slide导航； allEle.each(function(i){ var sideIndex, sideName, ddId, highlight='', ddClass, sideAnchor; sideName = $(this).find('.headline-content').text(); if($(this).hasClass('headline-1')){ sideAnchor = sideIndex = $(this).find('.anchor-1').eq(0).attr('name'); ddClass = 'sideCatalog-item1'; }else{ sideAnchor = $(this).find('.anchor-2').eq(0).attr('name'); sideIndex = sideAnchor.replace('-','.'); ddClass = 'sideCatalog-item2'; } ddId = 'sideToolbar-item-0-'+ sideAnchor; if(i==0){ highlight = 'highlight'; } var ddHtml = '<dd id="'+ ddId +'"+ddClass + ' ' + highlight +'">' + '<span>'+ sideIndex +'</span>' + '<a title="part'+sideAnchor+'" href="#'+sideAnchor+'">'+ sideName +'</a>' + '<span></span>' + '</dd>'; ddArr.push(ddHtml); }); $('#sideCatalog-catalog dl').html(ddArr.join('')); //设置导航的位置 var slideTop = $(window).height() - $('.slide').height(); $('.slide').css('top',slideTop); 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; } }) //点击导航中的各个目录 $('#sideCatalog-catalog dl').delegate('dd', 'click', function () { var index = $('#sideCatalog-catalog dl dd').index($(this)); scrollSlide($(this), index); var ddIndex = $(this).find('a').stop().attr('href').lastIndexOf('#'); var ddId = $(this).find('a').stop().attr('href').substring(ddIndex+1); var windowTop = $('a[name="' + ddId + '"]').offset().top; $('body,html').animate({scrollTop: windowTop}, 'fast'); }) //滚动页面，即滚动条滚动 $(window).scroll(function () { if($(this).scrollTop()>$(this).height()){ $('.slide').show(); }else{ $('.slide').hide(); } for (var i=headLen-1; i>=0; i--) { if ($(this).scrollTop() >=allEle.eq(i).offset().top - allEle.eq(i).height()) { var index = i; $('#sideCatalog-catalog dl dd').eq(index).addClass('highlight').siblings('dd').removeClass('highlight'); scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index); return false; } else { $('#sideCatalog-catalog dl dd').eq(0).addClass('highlight').siblings('dd').removeClass('highlight'); } } }) //导航的滚动，以及向上，向下按钮的显示隐藏 function scrollSlide(that, index){ if (index < 5) { $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast'); $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable'); $('#sideCatalog-up').removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable'); } else if (index > 11) { $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast'); $('#sideCatalog-down').removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable'); $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable'); } else { var dlTop = parseInt($('#sideCatalog-catalog dl').css('top')) + slideOutHeight / 2 - (that.offset().top - $('#sideCatalog-catalog').offset().top); $('#sideCatalog-catalog dl').stop().animate({'top': dlTop}, 'fast'); $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable'); $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable'); } } //置顶 $('#sideToolbar-up').bind('click', function(){ $('body,html').animate({scrollTop: 0}, 'fast'); }) //slide内容的显示与隐藏 $('#sideCatalogBtn').bind('click', function(){ if($(this).hasClass('sideCatalogBtnDisable')){ $(this).removeClass('sideCatalogBtnDisable'); $('#sideCatalog').css('visibility','visible'); }else{ $(this).addClass('sideCatalogBtnDisable'); $('#sideCatalog').css('visibility','hidden'); } }) </script>
【jquery仿百度百科底部浮动导航特效】相关文章：