没有合适的资源?快使用搜索试试~ 我知道了~
一、首先来看一下需求(截图为百度百科“医保”词条): 1、点击右侧的目录树,左侧跳转到指定的锚点位置; 2、滚动鼠标,游标跟随一起滚动至响应链接位置 二、实现思路 1、针对第一个需求,只需要设置游标所在div和右侧列表div的position为fixed,根据浏览器窗口定位,然后给左侧文章各区块增加id,为右侧列表每一项增加对应的href属性指向响应的锚点即可; 2、针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天用各种方法计算,但效果始终无法达到要求,后来分析了百度的实现源码恍然大悟,具体实现参考下图和代码部分。
资源详情
资源评论
资源推荐
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;
weixin_38750209
- 粉丝: 9
- 资源: 837
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0