一、首先来看一下需求(截图为百度百科“医保”词条):
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仿写百度百科的目录树,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
jquery,目录树
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
- 魔兽世界wlk暗牧一键输出宏是什么 wlk暗牧一键输出宏介绍
- 群星.1996-红不让台语原唱2辑【福和唱片】【WAV+CUE】
- 郭书瑶.2009-爱的抱抱(EP)【种子音乐】【FLAC分轨】
- 郑瑞芬.1989-BE.MY.BABY【现代】【WAV+CUE】
- 花钱请人每周放30万只不咬人的蚊子 防治登革热传播
- 饭制《第一后裔》丧尸版弗蕾娜
- 贝克汉姆亲临!2024FC品类游戏嘉年华圆满落幕
- 「命轨爻错之翼」风之翼发放说明
- 《原神》前瞻特别节目回顾长图
- 米游币抽抽乐-原神专场现已开启!
- 黑鸭子2001《风情中国HQCD》[日本版][WAV+CUE]
- 陈杰洲1990-成人礼[滚石][WAV+CUE]
- MarkAanderud-HandsFree(2024)[24-44,1]FLAC
- 孙露《观心》1:1母盘直刻限量版[低速原抓WAV+CUE][361M]
- 钟志刚《汽车DJ玩主》[低速原抓WAV+CUE][1G]