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


Posted in Javascript onNovember 27, 2015

先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦。

效果图:

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

效果展示    源码下载

代码说明:

仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用。

如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候有好的实现思路再搞吧,暂时没想到实现右侧导航区域和左侧内容的滚动并且联动的好办法。

注意:var directoryNav = new DirectoryNav($("h2,h3"),{}); 中的"h2,h3"就是生成两级导航的内容节点

/*
 *仿百度百科右侧导航代码 - 页面目录结构导航 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('<div class="directory-nav" id="directoryNav"><ul></ul><span class="cur-tag"></span><span class="c-top"></span><span class="c-bottom"></span><span class="line"></span></div>>');
   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('<li class="l1"><span class="c-dot"></span>'+index1+'. <a class="l1-text">'+text+'</a></li>');
    }else{
     index2++;
     temp.push('<li class="l2">'+index1+'.'+index2+' <a class="l2-text">'+text+'</a></li>');
    }
   });
   $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;i<offArr.length;i++){
    if((offArr[i] - windowHeight) < st) {
     var $curLi = this.$pageNavListLis.eq(i),
      tagTop = $curLi.position().top;
     $curLi.addClass("cur").siblings("li").removeClass("cur");
     this.curIndex = i;
     this.posTag(tagTop+this.$pageNavListLiH*0.5);
     //this.curIndex = this.$pageNavListLis.filter(".cur").index();
     this.opts.scrollChange.call(this);
    }
   }
  },
  bindEvent:function(){
   var This = this,
    show = false,
    timer = 0;
   this.$win.on("scroll",function(){
    var $this = $(this);
    clearTimeout(timer);
    timer = setTimeout(function(){
     This.scrollIng = true;
     if($this.scrollTop()>This.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,则一直显示
 });

在写百度百科右侧导航js代码的时候有个想法,就是让右侧导航区域的滚动条和左侧内容的滚动条用一个计算公式让他们关联起来,实现同步滚动。

Javascript 相关文章推荐
JavaScript中的字符串操作详解
Nov 12 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
使用Javascript简单计算器
Nov 17 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
Javascript操作select控件代码实例
Feb 14 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 #Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 #Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 #Javascript
基于jquery animate操作css样式属性小结
Nov 27 #Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 #Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 #Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 #Javascript
You might like
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python实现控制台进度条功能
2016/01/04 Python
怎样使用Python脚本日志功能
2016/08/14 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
python3字符串输出常见面试题总结
2020/12/01 Python
python 获取计算机的网卡信息
2021/02/18 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
四好少年事迹材料
2014/01/12 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
和解协议书
2014/04/16 职场文书
2014年环保工作总结
2014/11/26 职场文书
户外拓展训练感想
2015/08/07 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书