jQuery仿寫百度百科的目錄樹

更新時間：2017年01月03日 10:02:08 作者：惟吾德馨‘

這篇文章主要介紹了jQuery仿寫百度百科的目錄樹醫(yī)保詞條樣式，點擊右側(cè)的目錄樹，左側(cè)跳轉(zhuǎn)到指定的錨點位置，滾動鼠標，游標跟隨一起滾動至響應(yīng)鏈接位置，具體實現(xiàn)思路大家參考下本文

一、首先來看一下需求(截圖為百度百科“醫(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仿寫百度百科的目錄樹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: