jQuery仿写百度百科的目录树

一、首先来看一下需求(截图为百度百科“医保”词条):

1、点击右侧的目录树,左侧跳转到指定的锚点位置;

2、滚动鼠标,游标跟随一起滚动至响应链接位置

二、实现思路

1、针对第一个需求,只需要设置游标所在div和右侧列表div的position为fixed,根据浏览器窗口定位,然后给左侧文章各区块增加id,为右侧列表每一项增加对应的href属性指向响应的锚点即可;

2、针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天用各种方法计算,但效果始终无法达到要求,后来分析了百度的实现源码恍然大悟,具体实现参考下图和代码部分。

三、代码实现

/**定于延时执行函数**/
 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仿写百度百科的目录树,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-01-01

jquery树形菜单效果的简单实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery实现文档树效果

情形:本类别下面有好多子类别,每个子类别下面又有好多孙类别:需求:当点击本类别时,子类别如果是显示的就让它隐藏,子类别如果是隐藏的就让它显示. 效果如下: 图(1)点击前 图(2)点击后 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ mar

轻松学习jQuery插件EasyUI EasyUI创建树形菜单

一.EasyUI使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 <ul> 元素中.无序列表的 <ul> 元素提供一个基础的树(Tree)结构.每一个 <li> 元素将产生一个树节点,子 <ul> 元素将产生一个父树节点. 创建树形菜单(Tree) <ul class="easyui-tree"> <li> <span>Folder</s

jQuery遍历节点树方法分析

本文实例讲述了jQuery遍历节点树方法.分享给大家供大家参考,具体如下: demo.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type=&

jQuery树形控件zTree使用小结

0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 zTree的特点  •最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.

多功能jQuery树插件zTree实现权限列表简单实例

zTree 是一个依靠jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree官网 zTreeAPI下载链接 页面主要引入一下几个文件:  <link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" /> <script type="text/javascript&q

jquery实现的树形目录实例

本文实例讲述了jquery实现的树形目录.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .st_tree ul li { font-size:13p

jquery实现树形菜单完整代码

本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

jQuery zTree加载树形菜单功能

由于项目中需要设计树形菜单功能,于是百度找相关资料,发现zTree方面的资料不少,觉得挺不错,而且zTree官方也有API文档,介绍的非常详细,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 2.zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 3.采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本

jquery插件treegrid树状表格的使用方法详解(.Net平台)

上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一.使用treegrid,需要以下支持 jquery.min.js+jquery.treegrid.min.js 二.后端提供树状列表格式的集合数据,借助前端的DT的配置控制,来在页面上输出满足treegrid格式要求的html 前台: @using Model @{ Layout = null; Us

Java Swing树状组件JTree用法实例详解

本文实例讲述了Java Swing树状组件JTree用法.分享给大家供大家参考,具体如下: 一.简单样式 先看运行效果: TreeNodeDemo.java package awtDemo; import javax.swing.JFrame; import javax.swing.JTree; import javax.swing.event.TreeSelectionEvent; import javax.swing.event.TreeSelectionListener; import j

vue2.0结合DataTable插件实现表格动态刷新的方法详解

本文实例讲述了vue2.0结合DataTable插件实现表格动态刷新的方法.分享给大家供大家参考,具体如下: 产品提出的需求是这样的,很普通的一个统计server端task完成率和状态的表格,要自动刷新其中的数据,并且当单个task完成的时候report给server端,看起来好easy好easy的一个需求啊!且听我说完哈! 我这边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都是前端弄,也就是说后端只管把一大坨数据塞到前端,然后前端自己组装分页器和完成模糊搜索,所以

jQuery树控件zTree使用方法详解(一)

一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: js: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data: { simpleData: { enable: true, idKey:

jQuery事件绑定on()、bind()与delegate() 方法详解

啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法:bind().del

jQuery插件DataTable使用方法详解(.Net平台)

上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件------DataTable(简称DT),很好用. DT是一款前端插件,和后端完全分离开,就这点来看,我就特别喜欢. 一.使用DT,需要以下支持 js:jq+jquery.dataTables.min.js  二.页面上进行引入js,直接使用DT功能 前端代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m

jQuery中Ajax的get、post等方法详解

load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.get()方法使用GET方式来进行异步请求.结构为:$.get(url [, data] [, callback] [, type]) $.get()方法参数解释如下: 参数名称 类型 说明 url String 请求的HTML页的URL地址 data(可选) Obj

YII2框架中excel表格导出的方法详解

前言 表格的导入导出是我们在日常开发中经常会遇到的一个功能,正巧在最近的项目中做到了关于表格输出的功能,并且之前用TP的时候也做过,所以想着趁着这次功能比较多样的机会整理一下,方便以后需要的时候,或者有需要的朋友们参考学习,下面话不多说了,来一起看看详细的介绍: 本文是基于YII2框架进行开发的,不同框架可能会需要更改 一.普通excel格式表格输出 先是最普通的导出.xls格式的表格.首先先看一下表格在网站的显示效果 这里可以看到整个表格一共是7列.下面来看代码的实现. 1.controlle

FF下 用 col 隐藏表格列的方法详解!

今天,我在一个有52个字段的报表时,迫使我深入的做了一下研究, 我发现: col在ff下的display 的默认值是:table-column  visibility的默认值为:visible 我又查查了CSS手册,发现 visibility 有一个 collapse的可选值,据说在IE下是没有实现的,IE没实现不竺于FF没有实现,就像FF不支持的不一定IE不支持一样. BT的我,一个一个试了一遍, 终于发现了! FF下可以用下面的方法,用COL把表格的列给隐藏! 欢呼! 复制代码 代码如下:

PHP 简易输出CSV表格文件的方法详解

复制代码 代码如下: $ret = '';$arrs = array(array(1,'test1'),             array(2,'test2'),             array(3,'test3'),             array(4,'test4'),             array(5,'test5'),             array(6,'test6'),             array(7,'test7')            );forea