箭頭導航你在

Question

有誰知道，如果存在一個插件或類似的實現導航這樣的網站上：http://discover.store.sony.com/tablet/#entertainment

我講的向上和向下箭頭懸停在上面PR時出現屏幕底部。

Answer 1

從理論上講，這應該不會太難寫自己。這是在頁面某些部分懸停時實現箭頭的起點。您只需要根據用戶當前正在查看的部分來處理附加到箭頭的特定鏈接。

詳情請參見注釋。

Fiddle

注意的是，在小提琴我用event.pageX和event.pageY得到當前鼠標的位置，但在現實中，你應該使用event.screenX和event.screenY。因爲小提琴中的演示作爲一個小窗口嵌入到實際頁面中，所以使用後者將無法工作。

// Define how wide the areas should be 
// where the arrow appears 
var top_nav_height = 70; 
var bottom_nav_height = 70; 

// Get some dimensions 
var page_height = $(document).height(); 
var half_arrow_size = $('.uparrow').width()/2; 

// Listen to the user moving their mouse 
$(document).mousemove(function(event) { 
    // Where is the mouse? 
    var pos_y = event.screenY; // Distance from top of the page 
    var pos_x = event.screenX; // Distance from left of the page 
    var in_area; 
    // Leave a 5px space to hide the arrows when 
    // the pointer moves outside of the page 
    if (pos_y <= top_nav_height 
     && pos_y > 5) { 
     in_area = 'top_nav'; 
    } 
    else if (page_height - pos_y <= bottom_nav_height 
      && page_height - pos_y > 5) { 
     in_area = 'bottom_nav'; 
    } 

    // Show the arrow when in a nav area 
    switch(in_area) { 

     // We are in the top nav area 
     case 'top_nav': 
      // Show the .uparrow and have it follow the mouse 
      $('.uparrow') 
       .show() 
       .css({ 
        top: pos_y - half_arrow_size, 
        left: pos_x - half_arrow_size 
       }); 
      break; 

     // We are in the bottom nav area 
     case 'bottom_nav': 
      // Show the .bottomarrow and have it follow the mouse 
      $('.bottomarrow') 
       .show() 
       .css({ 
        top: pos_y - half_arrow_size, 
        left: pos_x - half_arrow_size 
       }); 
      break; 

     // We aren't in a nav area 
     default: 
      // Hide both arrows 
      $('.uparrow, .bottomarrow').hide(); 
    } 

    // Decide where the arrow should link 

}); 

要處理的環節，我想你也可以有單獨的一組上你的頁面的每個部分的箭頭，讓他們鏈接到目標幾乎可以被硬編碼。