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 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
node.js连接mysql与基本用法示例
Jan 05 Javascript
js实现随机数小游戏
Jun 28 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
js实现滑动进度条效果
Aug 21 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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的历史和优缺点
2006/10/09 PHP
PHP使用者状态管理功能的应用
2006/10/09 PHP
php中处理模拟rewrite 效果
2006/12/09 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python多线程并发及测试框架案例
2019/10/15 Python
Python利用命名空间解析XML文档
2020/08/10 Python
如何真正的了解python装饰器
2020/08/14 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
C#笔试题集合
2013/06/21 面试题
普通员工辞职信
2014/01/17 职场文书
阅兵口号
2014/06/19 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
2014年技术员工作总结
2014/11/18 职场文书
会议室使用管理制度
2015/08/06 职场文书
初中政治教师教学反思
2016/02/23 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL