1. 程式人生 > >網站的導航條下的指示器

網站的導航條下的指示器

搜索 css樣式 直接 指示 之前 UNC 怎麽 scrolltop slide

eg:一般情況下,網站上的導航條會吸頂或者不做處理的,在處理吸頂情況:指示器的顏色會有不同的需求,在默認進入頁面首頁時,導航條的指示器顏色時黑色(看公司需求確定),鼠標在懸停到某一個產品會展示下方信息,一般的寫法用對應的hover事件處理時沒有問題的。在需要吸頂後在改變鼠標懸停的效果並且當前的指示器需要改變顏色(和之前的顏色不同)為白色。我們一般遇到會先到時在監聽滾動時,去處理對應的事件,是沒有問題的。但是呢,在遇到是要鼠標懸停時再去改變事件的時候,我們就不應再用hover 事件去處理,我們要怎麽處理呢???這個原理是一樣的,只是處理的方式會更符合自己的需求;

鼠標懸停當前產品,展示更多信息,可以使用toggle屬性處理;eg:$(‘找到對應節點‘).hover(function(){

$(找到需要展示更多信息的節點).stop().slideToggle();

stop();slideToggle();自行搜索即可找到對應用法。

});

直接給出方案,各位有更好的方法可以一起分享,一起進步。一下是自己的解決方案:

現在是使用jQuery做的:

// 鼠標進入時的處理

$(‘獲取到對應的Dom節點‘).mouseenter(function(){

// 獲取當前滾動高度的判定處理

  滾動的高度H

  if($(document).scrollTop() >= H){

    // 這裏是處理滾動一定高度需要改變的指示器顏色

   $(this).css({對應的css樣式})

  } else {

    $(this).css({還原原來對應的css樣式})

}

});

// 鼠標離開時的處理

$(‘獲取到對應的Dom節點‘).mouseleave(function(){

  // 這裏是處理滾動一定高度離開需要改變的指示器顏色

  if($(document).scrollTop() >= H){

    $(this).css({對應的css樣式設置為none})

  } else {

    $(this).css({對應的css樣式設置為none})

  }

});

網站的導航條下的指示器