箭头导航你在

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 

}); 

要处理的环节，我想你也可以有单独的一组上你的页面的每个部分的箭头，让他们链接到目标几乎可以被硬编码。