位置: 编程技术 - 正文

jQuery仿写百度百科的目录树

编辑:rootadmin

推荐整理分享jQuery仿写百度百科的目录树,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

二、实现思路

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

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

jQuery仿写百度百科的目录树

三、代码实现

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

jquery插件treegrid树状表格的使用方法详解(.Net平台) 上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:

深入理解Jquery表单验证(使用formValidator) 本篇文章使用插件:formValidator,具体如下:使用步骤:1.首先在项目中添加必备js与css2.代码中添加引用(必备引用)scriptsrc="Scripts/jquery-1.4.1.min.js"type="t

原生JS实现在线问卷调查投票特效 效果图:代码如下:!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleJS+CSS实现投票效果/titlelinkrel="stylesheet"href="

标签: jQuery仿写百度百科的目录树

本文链接地址:https://www.jiuchutong.com/biancheng/374031.html 转载请保留说明!

上一篇:jquery实现下拉框多选方法介绍(jquery 下拉框变更事件)

下一篇:jquery插件treegrid树状表格的使用方法详解(.Net平台)(jQuery插件安装教程)

  • 增值税发票阅读器干什么用的
  • 关于美容院的会计如何做账
  • 投资性房地产处置的账务处理
  • 公司两年账没做
  • 企业所得税返还计入什么科目
  • 个体工商户化妆品经营范围
  • 平行式明细账
  • 还没入库,发票已经给财务了 怎么办
  • 购进原材料验收入库,贷款商业汇票结算
  • 房租收入应该计入什么
  • 会计差旅费属于什么会计科目
  • 拍卖公司如何开展业务
  • ktv的发票可以报销吗
  • 如何处理走逃失的人
  • 资产管理人该如何称呼
  • 租赁发票需要写税号吗
  • 附加税减半征收政策是哪个文件
  • 存货占比小有什么影响
  • 子公司和母公司可以一起投标吗
  • 兼职人员工资个税怎么申报
  • 跟银行借款按月还款
  • 老板垫付的钱应该怎么做科目
  • linux强制删除文件夹
  • 开办费计入长期待摊费用汇算清缴时怎么填写
  • 跨境电商的账务怎么做
  • 设计行业开票税点
  • 打开win10 defender
  • linux系统之间拷贝文件命令
  • linux root 命令
  • 股东年终利润分录怎么写
  • 武侯祠红墙在哪个门
  • 教育行业财务处理流程
  • css定位属性的运用
  • test指令怎么用
  • 命令行窗口
  • discuz怎么用
  • CSS SandBox
  • 养老保险产生的利息怎么入账
  • mysql用户授权信息保存在哪里
  • 小微企业增值税减免政策
  • 维修费用的处理规定
  • Excel导入数据库出错
  • 个人代人开普票个税怎么算
  • 如何确认固定资产的减值
  • 材料暂估入库的账务处理
  • 存货 跌价
  • ukey要交服务费吗
  • 计提以前年度应付股利的分录
  • 专票入账用哪一联
  • 红字的记账凭证怎么记账
  • 一般纳税人印花税税率是多少
  • 暂估应付账款余额在贷方
  • 银行日记账余额与银行对账单不符
  • 财务会计与预算会计差异如何处理
  • Linux下mysql的root密码修改方法
  • 配置结果
  • 如何最简单的
  • windows8whql
  • linux bye
  • linux 测试工具
  • win8开机进入开始界面
  • 贪心算法编程题
  • opengl矩形
  • linuxparted命令
  • web前端开发工具哪个好
  • unity如何成一组
  • js圆形链
  • 在浏览器中打开是什么意思
  • 安卓中textview
  • javascript学习指南
  • jQuery.Callbacks()回调函数队列用法详解
  • python 解析算法
  • 常州的居民医保在哪里交
  • 在地税局工作是什么编制
  • 重庆购房退契税
  • 济南个税起征点是多少2021
  • 增值税已申报但是忘清卡
  • 乾隆年间财政收入统计表
  • 草原补偿标准
  • 重庆医疗app
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设