基于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 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
比较简单的异步加载JS文件的代码
Jul 18 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
javascript每日必学之封装
Feb 23 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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
简单采集了yahoo的一些数据
2007/02/14 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
javascript self对象使用详解
2016/10/18 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
Python实现身份证号码解析
2015/09/01 Python
python迭代dict的key和value的方法
2018/07/06 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python版本五子棋的实现代码
2018/12/11 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
工地资料员岗位职责
2013/12/31 职场文书
公开服务承诺制度
2014/03/26 职场文书
同学聚会邀请函
2015/01/30 职场文书
党员活动总结
2015/02/04 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python