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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
javascript学习之json入门
Dec 22 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
通过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
php调用mysql存储过程
2007/02/14 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
Vue精简版风格概述
2018/01/30 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
详解Python中break语句的用法
2015/05/14 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
最新销售员个人自荐信
2013/09/21 职场文书
总监职责范文
2013/11/09 职场文书
师德师风整改措施
2014/10/24 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
网络研修随笔感言
2015/11/18 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android