基于Jquery实现仿百度百科右侧导航代码附源码下载_jquery

/*
 *仿百度百科右侧导航代码 - 页面目录结构导航 v0.01
 * 只写了两级，无限级别也可以，是逻辑上的级别，html结构全是同一级别
 * 滑标动画用的css3过渡动画，不支持的浏览器就没动画效果了
 * 和百度百科比起来还是比较弱，没有实现右边也可以滚动的功能
 */
 function DirectoryNav($h,config){
  this.opts = $.extend(true,{
   scrollThreshold:0.5, //滚动检测阀值 0.5在浏览器窗口中间部位
   scrollSpeed:700,  //滚动到指定位置的动画时间
   scrollTopBorder:500, //滚动条距离顶部多少的时候显示导航
   easing: 'swing',  //不解释
   delayDetection:200,  //延时检测，避免滚动的时候检测过于频繁
   scrollChange:function(){}
  },config);
  this.$win = $(window);
  this.$h = $h;
  this.$pageNavList = "";
  this.$pageNavListLis ="";
  this.$curTag = "";
  this.$pageNavListLiH = "";
  this.offArr = [];
  this.curIndex = 0;
  this.scrollIng = false;
  this.init();
 }
 DirectoryNav.prototype = {
  init:function(){
   this.make();
   this.setArr();
   this.bindEvent();
  },
  make:function(){
   //生成导航目录结构,这是根据需求自己生成的。如果你直接在页面中输出一个结构那也挺好不用 搞js
   $("body").append('
>');
   var $hs = this.$h,
    $directoryNav = $("#directoryNav"),
    temp = [],
    index1 = 0,
    index2 = 0;
   $hs.each(function(index){
    var $this = $(this),
      text = $this.text();
    if(this.tagName.toLowerCase()=='h2'){
     index1++;
     if(index1%2==0) index2 = 0;
     temp.push('

'+index1+'. '+text+'

'); }else{ index2++; temp.push('

'+index1+'.'+index2+' '+text+'

'); } }); $directoryNav.find("ul").html(temp.join("")); //设置变量 this.$pageNavList = $directoryNav; this.$pageNavListLis = this.$pageNavList.find("li"); this.$curTag = this.$pageNavList.find(".cur-tag"); this.$pageNavListLiH = this.$pageNavListLis.eq(0).height(); if(!this.opts.scrollTopBorder){ this.$pageNavList.show(); } }, setArr:function(){ var This = this; this.$h.each(function(){ var $this = $(this), offT = Math.round($this.offset().top); This.offArr.push(offT); }); }, posTag:function(top){ this.$curTag.css({top:top+'px'}); }, ifPos:function(st){ var offArr = this.offArr; //console.log(st); var windowHeight = Math.round(this.$win.height() * this.opts.scrollThreshold); for(var i=0;iThis.opts.scrollTopBorder){ if(!This.$pageNavListLiH) This.$pageNavListLiH = This.$pageNavListLis.eq(0).height(); if(!show){ This.$pageNavList.fadeIn(); show = true; } This.ifPos( $(this).scrollTop() ); }else{ if(show){ This.$pageNavList.fadeOut(); show = false; } } },This.opts.delayDetection); }); this.$pageNavList.on("click","li",function(){ var $this = $(this), index = $this.index(); This.scrollTo(This.offArr[index]); }) }, scrollTo: function(offset,callback) { var This = this; $('html,body').animate({ scrollTop: offset }, this.opts.scrollSpeed, this.opts.easing, function(){ This.scrollIng = false; //修正弹两次回调 蛋疼 callback && this.tagName.toLowerCase()=='body' && callback(); }); } }; //调用实例化 var directoryNav = new DirectoryNav($("h2,h3"),{ scrollTopBorder:0 //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示 });