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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
javascript 闭包
Sep 15 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
JavaScript实现单点登录的示例
Sep 23 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中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php使用google地图应用实例
2014/12/31 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
用vue写一个日历
2020/11/02 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
python中数字是否为可变类型
2020/07/08 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
会计应聘求职信范文
2013/12/17 职场文书
单位人事专员介绍信
2014/01/11 职场文书
阅兵口号
2014/06/19 职场文书
无房证明范本
2014/09/17 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
职工食堂管理制度
2015/08/06 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电