jQuery仿写百度百科的目录树


Posted in Javascript onJanuary 03, 2017

一、首先来看一下需求(截图为百度百科“医保”词条):

1、点击右侧的目录树,左侧跳转到指定的锚点位置;

2、滚动鼠标,游标跟随一起滚动至响应链接位置

jQuery仿写百度百科的目录树

二、实现思路

1、针对第一个需求,只需要设置游标所在div和右侧列表div的position为fixed,根据浏览器窗口定位,然后给左侧文章各区块增加id,为右侧列表每一项增加对应的href属性指向响应的锚点即可;

2、针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天用各种方法计算,但效果始终无法达到要求,后来分析了百度的实现源码恍然大悟,具体实现参考下图和代码部分。

jQuery仿写百度百科的目录树

三、代码实现

/**定于延时执行函数**/
 var timeFun = null;
 /**找到当前页面滚动到的锚点位置**/
 var findHref = function(){
  var $links = $('.link');
  var windowScrollTop = $(window).scrollTop();
  var maxDistance = 10000;
  var result = $links.eq(0);
  $.each($links,function(i,link){
   var curDistanceToTop = Math.abs($links.eq(i).offset().top - windowScrollTop);
   /**if(maxDistance > curDistanceToTop && ($links.eq(i).offset().top < (windowScrollTop + $(window).height()))){
    maxDistance = curDistanceToTop;
    result = $links.eq(i);
   } 这段代码相当于下面这一句代码,优秀的代码就应该拿来多学习!**/
   maxDistance > curDistanceToTop && $links.eq(i).offset().top < windowScrollTop + $(window).height() && (maxDistance = curDistanceToTop,result = $links.eq(i))
  });
  return result;
 };
 /***使用jQuery创建移动动画*/
 var move = function (dis) {
  var $arrow = $('.arrow');
  $arrow.animate({top:dis},'normal');
 }
 /**滚轮事件Handler**/
 var wheelHandler = function(e){
  clearTimeout(timeFun);
  timeFun = setTimeout(function(){
   var href = findHref();
   var index = href[0].id.substring(1);
   var dis = 30*(index-1)+10;
   move(dis);
  },600);
 };
 /***注册滚轮事件*/
 $('body').on('mousewheel',wheelHandler);

四、Tips

1、$('.link')[0]返回的是普通的Dom对象,而代码中使用$('.link').eq(0)返回的是jQuery对象,jQuery对象才有.offset()方法。

补充说明:eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。

2、为什么要使用延时执行函数,并且在wheelHandler中clearTimeout(timeFun)?

因为我们正常滚动鼠标会触发多次的mousewheel事件,为了防止jQuery动画出现卡顿的现象,将代码设计成只在鼠标滚轮停下来的时候去触发,clearTimeout做的事情就是只要鼠标滚轮还在滚动,进入wheelHandler方法,就把前面已加入到延时执行队列中的方法清除,这样就可以做到只对最后一个滚动触发动画事件,看上去就好像鼠标滚轮停止滚动了才去触发一样。

以上所述是小编给大家介绍的jQuery仿写百度百科的目录树,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 #Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 #Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 #Javascript
JS求解三元一次方程组值的方法
Jan 03 #Javascript
Vue.js系列之项目结构说明(2)
Jan 03 #Javascript
Vue.js系列之项目搭建(1)
Jan 03 #Javascript
jquery实现下拉框多选方法介绍
Jan 03 #Javascript
You might like
微信公众号开发客服接口实例代码
2016/10/21 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
angularjs实现首页轮播图效果
2017/04/14 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
Python3之文件读写操作的实例讲解
2018/01/23 Python
详解python3中tkinter知识点
2018/06/21 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
微信小程序python用户认证的实现
2019/07/29 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
python 装饰器的使用示例
2020/10/10 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
Linux内核产生并发的原因
2012/07/13 面试题
生日邀请函范文
2014/01/13 职场文书
关于安全的演讲稿
2014/05/09 职场文书
给校长的一封检讨书
2014/09/20 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android