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 动态添加样式规则 W3C校检
Dec 25 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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
mysql5写入和读出乱码解决
2006/11/25 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
PHP Session机制简介及用法
2014/08/19 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
javascript radio 联动效果
2009/03/04 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
python中list常用操作实例详解
2015/06/03 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
党员作风建设自查报告
2014/10/23 职场文书
计算机专业自荐信
2015/03/05 职场文书
工作表现证明
2015/06/15 职场文书
办公用品管理制度
2015/08/04 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
Python实现简单得递归下降Parser
2022/05/02 Python