jQuery仿寫百度百科的目錄樹
一、首先來看一下需求(截圖為百度百科“醫(yī)保”詞條):
1、點擊右側(cè)的目錄樹,左側(cè)跳轉(zhuǎn)到指定的錨點位置;
2、滾動鼠標,游標跟隨一起滾動至響應(yīng)鏈接位置

二、實現(xiàn)思路
1、針對第一個需求,只需要設(shè)置游標所在div和右側(cè)列表div的position為fixed,根據(jù)瀏覽器窗口定位,然后給左側(cè)文章各區(qū)塊增加id,為右側(cè)列表每一項增加對應(yīng)的href屬性指向響應(yīng)的錨點即可;
2、針對第二個需求,定義鼠標的滾動事件mousewheel(在ff下事件為DOMMouseScroll),當時自己琢磨了半天用各種方法計算,但效果始終無法達到要求,后來分析了百度的實現(xiàn)源碼恍然大悟,具體實現(xiàn)參考下圖和代碼部分。

三、代碼實現(xiàn)
/**定于延時執(zhí)行函數(shù)**/
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);
} 這段代碼相當于下面這一句代碼,優(yōu)秀的代碼就應(yīng)該拿來多學習!**/
maxDistance > curDistanceToTop && $links.eq(i).offset().top < windowScrollTop + $(window).height() && (maxDistance = curDistanceToTop,result = $links.eq(i))
});
return result;
};
/***使用jQuery創(chuàng)建移動動畫*/
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、為什么要使用延時執(zhí)行函數(shù),并且在wheelHandler中clearTimeout(timeFun)?
因為我們正常滾動鼠標會觸發(fā)多次的mousewheel事件,為了防止jQuery動畫出現(xiàn)卡頓的現(xiàn)象,將代碼設(shè)計成只在鼠標滾輪停下來的時候去觸發(fā),clearTimeout做的事情就是只要鼠標滾輪還在滾動,進入wheelHandler方法,就把前面已加入到延時執(zhí)行隊列中的方法清除,這樣就可以做到只對最后一個滾動觸發(fā)動畫事件,看上去就好像鼠標滾輪停止?jié)L動了才去觸發(fā)一樣。
以上所述是小編給大家介紹的jQuery仿寫百度百科的目錄樹,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery結(jié)合CSS制作漂亮的select下拉菜單
對于我來說,標準的HTML元素(Select)已經(jīng)讓我感到討厭。它不能夠正常的在IE瀏覽器上顯示。還有一點就是他并不僅僅包含簡單的文本。本實例將完全摒棄select元素,通過JQuery和CSS來構(gòu)建DropDown元素。2015-05-05
由點擊頁面其它地方隱藏div所想到的jQuery的delegate
在網(wǎng)頁開發(fā)的過程中經(jīng)常遇到的一個需求就是點擊一div內(nèi)部做某些操作,而點擊頁面其它地方隱藏該div。比如很多導航菜單,當菜單展開的時候,就會要求點擊頁面其它非菜單地方,隱藏該菜單2013-08-08
jQuery如何實現(xiàn)點擊頁面獲得當前點擊元素的id或其他信息
點擊頁面獲得當前點擊元素的id或者其他信息,使用jquery可以輕松做到這一點,下面有個不錯的示例,希望對大家有所幫助2014-01-01

