首先,看看需求(
截图是百度百科):
1、点击
正确的
目录树,向左跳转到指定的锚点
位置;
2。滚动
鼠标,光标折叠起来,滚动到响应链接位置。
二、实现思想
1,对于第一个需求,我们只需要将游标div和右边列表div的位置
设置为固定。根据
浏览器窗口的位置,我们把身份证每一块左的文章,并添加相应的href
属性的每个响应响应列表锚列表。
2、第二需求,滚轮鼠标滚动事件的定义(在FF事件为dommousescroll),通过自己的各种
方法计算了很长时间,但已无法满足要求,然后分析了百度的源代码实现的
参考实现恍然大悟,部分代码。
三。代码实现
延迟被安排来
执行***的
功能。
无功timefun = null;
找到锚位置,滚动到当前页面
无功findhref =
函数(){()
var = $(链接);
无功windowscrolltop = $(窗口)ScrollTop();
VaR最大距离= 10000;
VaR结果= $(0)links.eq;
$($链接,函数(i,链接){)
无功curdistancetotop = math.abs($ links.eq(我)。偏移()。顶windowscrolltop);
/ * *如果(最大距离> curdistancetotop($ links.eq(我)。偏移()。顶<(windowscrolltop + $(窗口),Height()))){
最大距离= curdistancetotop;
结果links.eq美元(我);
这段代码相当于下面的代码,优秀的代码应该更多地
学习!**
最大距离> curdistancetotop links.eq美元(我)。偏移()。顶< windowscrolltop + $(窗口),Height()(最大距离=和= = curdistancetotop,(=))。
});
返回结果;
};
使用jQuery
创建移动/
动画。
var移动=函数(DIS){
变量$
箭头= $(箭头);
arrow.animate美元({顶:DIS },正常);
}
*轮事件
处理程序***
无功wheelhandler =功能(e){
ClearTimeout(timefun);
timefun = setTimeout(){()函数(
VaR href = findhref();
VaR指标= href { 0 }。id.substring(1);
VaR DIS = 30 *(指数)+ 10;
移动(DIS);
},600);
};
注册事件/滚轮
$('body '),('mousewheel ',wheelhandler);
四、
提示 1,$(链接){ 0 }返回一个公共DOM对象,而代码使用$(.)(EQ)(0)返回jQuery对象,而jQuery对象具有。
附加指令:EQ返回jQuery对象,get(n)和索引返回到DOM元素对象。
2。为什么要使用延迟执行功能和清除定时器(timefun)在wheelhandler
因为我们的正常滚动鼠标滚轮事件会触发很多,为了防止jQuery动画卡顿的现象,它只会停下来的时候,鼠标滚轮的代码设计来触发,清除定时器做的是只要鼠标滚轮滚动,到wheelhandler方法,前面已被添加到队列中清除的延迟和执行方法它只能在最后触发滚动动画事件做,好像鼠标滚轮滚动触发停止。
以上是百度百科的jQuery目录,我想帮助你。如果你有任何问题,请给我留言。萧边会及时回复你。谢谢你的
支持网站。