仿写百度百科的目录树
一、首先来看一下需求(截图为百度百科“医保”词条):
1、点击右侧的目录树,左侧跳转到指定的锚点位置;
2、滚动鼠标,游标跟随一起滚动至响应链接位置
二、实现思路
1、针对第一个需求,只需要设置游标所在div和右侧列表div的position为fixed,根据浏览器窗口定位,然后给左侧文章各区块增加id,为右侧列表每一项增加对应的href属性指向响应的锚点即可;
2、针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天用各种方法计算,但效果始终无法达到要求,后来分析了百度的实现源码恍然大悟,具体实现参考下图和代码部分。
三、代码实现
1 /**定于延时执行函数**/ 2 var timeFun = null; 3 /**找到当前页面滚动到的锚点位置**/ 4 var findHref = function(){ 5 var $links = $('.link'); 6 var windowScrollTop = $(window).scrollTop(); 7 var maxDistance = 10000; 8 var result = $links.eq(0); 9 $.each($links,function(i,link){ 10 var curDistanceToTop = Math.abs($links.eq(i).offset().top - windowScrollTop); 11 /**if(maxDistance > curDistanceToTop && ($links.eq(i).offset().top < (windowScrollTop + $(window).height()))){ 12 maxDistance = curDistanceToTop; 13 result = $links.eq(i); 14 } 这段代码相当于下面这一句代码,优秀的代码就应该拿来多学习!**/ 15 maxDistance > curDistanceToTop && $links.eq(i).offset().top < windowScrollTop + $(window).height() && (maxDistance = curDistanceToTop,result = $links.eq(i)) 16 }); 17 return result; 18 }; 19 /***使用jQuery创建移动动画*/ 20 var move = function (dis) { 21 var $arrow = $('.arrow'); 22 $arrow.animate({top:dis},'normal'); 23 } 24 /**滚轮事件Handler**/ 25 var wheelHandler = function(e){ 26 clearTimeout(timeFun); 27 timeFun = setTimeout(function(){ 28 var href = findHref(); 29 var index = href[0].id.substring(1); 30 var dis = 30*(index-1)+10; 31 move(dis); 32 },600); 33 }; 34 /***注册滚轮事件*/ 35 $('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方法,就把前面已加入到延时执行队列中的方法清除,这样就可以做到只对最后一个滚动触发动画事件,看上去就好像鼠标滚轮停止滚动了才去触发一样。
转载于:https://www.cnblogs.com/allenben/p/6238413.html
仿写百度百科的目录树相关推荐
- 仿写百度首页的float布局
介绍 之前已经写过很多遍百度首页了,但是今天的记录的重点是不同以往,才用的布局方式是float,浮动的方式来布局. 查看百度首页的源码是采用绝对定位的方式进行布局的 今天来记录另一种布局方式,只不过是 ...
- 仿写百度(百度一下 你就知道)搜索页面
**主页面展示:** 页面代码(HTML) <!DOCTYPE html> <html> <head lang="en"><meta ch ...
- 如何在百度百科里创建一个百科词条,百度百科官网创建词条步骤方法
很多朋友表示特别希望能在百度百科里创建一个百科词条,但是在百度百科官网却不知如何操作创建百科词条,连最基本的百度百科操作步骤可能都不清楚,下面洛希爱做百科网为大家分享如何在百度百科里创建一个百科词条, ...
- 品牌百度百科词条创建方法是什么?品牌百科怎么创建?
再小的个体也有自己的品牌,尤其是在当今时代,人们买什么产品或是选择什么服务都更有品牌意识,更认品牌. 市面上大大小小的品牌也不少,但是真正有一些名气.被大众所熟知的品牌还真的不多,如果一个品牌连知名度 ...
- 程序设计竞赛(ACM)与认证(CCF)的概念集(百度百科)
后缀数组_百度百科 后缀树_百度百科 红黑树_百度百科 伸展树_百度百科 线段树_百度百科 树状数组_百度百科 笛卡尔树_百度百科 二叉查找树_百度百科 Trie树_百度百科 字典树_百度百科 划分树 ...
- 百度百科创建词条怎么引用参考文献,哪些新闻可以作为百度百科参考资料
很多人在进行百度百科词条创建时不懂得怎么写参考文献,也不明白创建百度百科对于参考资料有什么要求. 一般来说,提示资料来源不可靠主要有以下几方面的原因.第一种是资料来源不可靠,像一些个人博客.贴吧论坛. ...
- 企业人物的百度百科怎么建立的,创建百度百科词条要交费吗
很多人其实对于企业人物的百度百科是怎么建立的都是一知半解的,如果自己去创建百度百科词条要交费吗,下面洛希网络科技教教大家如何自己创建百度百科. 百度百科是一个开放的内容平台,百度百科的编辑和创建都是免 ...
- 人物百科词条如何创建?百度百科人物词条怎么创建?
当一些企业家.医生.律师.教授.作家等人物想要提高自己的知名度和权威性,获得更多曝光和流量的时候,都会选择创建个人百度百科. 因为百度百科词条具有公信力,受到用户的信赖,就好比是一张网络名片,有一个自 ...
- js html5 目录 树,详解百度百科目录导航树小插件
说起来比较惭愧,在园子里混了4年,注册账号也有3年多了,一篇博客都没有写过,之前不写博客的原因是:1,觉得自己的水平弱爆了,不敢出来误人子弟,也怕大牛们笑话 2,太懒了,有时候自己搞一点小东西,搞的过 ...
最新文章
- Django的mode的分组查询和聚合查询和F查询和Q查询
- Boost:使用boost :: hash和boost :: array的测试
- 【语义分割】ASPP:Rethinking Atrous Convolution for Semantic Image Segmentation
- Shiro的authc过滤器的执行流程
- 内部类及内部类什么时候使用
- 防止网页被嵌入框架的代码
- linux运算_linux中的计算【转】
- 接口测试--apipost接口断言详解
- 改善CSS的10种最佳做法,帮助你从样式中获得最大的收益
- Qt4_Find File对话框
- 基于关系数据库彩票开奖模拟系统 的设计与实现
- 万亿级大数据监控平台建设实践
- gradle Could not resolve 依赖包
- 牛顿广义二项式定理-母函数
- html 按钮按下变色松开还原,js中怎么写点击按钮时变色,松开后恢复原来的颜色...
- 三电极体系 电化学传感器
- python的金融计算器_货币的时间价值 —— 带着Python玩金融(1)
- 2022-2028年全球与中国医用级AC-DC电源行业竞争格局与投资战略研究
- 【王道考研】吸烟者问题
- Altium Designer绘制stm32最小系统PCB
热门文章
- python输入完怎么运行-教你如何编写、保存与运行Python程序的方法
- python读取excel画散点图-matplotlib两种画散点图的方式
- python3项目-python3项目
- pythonweb毕业设计-[分享]我发现了一个快速完成物联网毕业设计的好方法!
- python工程师收入-Python工程师薪水居然这么高
- 如何系统的自学python 知乎-作为小白,如何系统的自学PythonWeb开发?
- python利器怎么编程-Python任务调度利器之APScheduler详解
- python读取中文文件报错-Python3 解决读取中文文件txt编码的问题
- 不是python中用于开发用户界面的第三方库-模拟试卷C
- 零基础学python用什么书-零基础自学python3 好用的入门书籍推荐