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 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
手机号码,密码正则验证
Sep 04 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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
中东人咖啡哲学
2021/03/03 咖啡文化
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
python截取两个单词之间的内容方法
2018/12/25 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
加工操作管理制度
2014/01/19 职场文书
食品安全标语
2014/06/07 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
素质教育培训心得体会
2016/01/19 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android
Python中的 enumerate和zip详情
2022/05/30 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers