水平滾動ul與鼠標

Question

我怎樣才能水平滾動ul使用鼠標光標？基本上我想模仿this圖片庫的底部部分。我在網上找到了一種javascript方法，但並沒有那麼順利。

Answer 1

<div> 
    <ul> 
     <li></li> 
     ... 
    </ul> 
</div> 

和JavaScript：

var $div = $('div'); 
var $ul = $('ul'); 

// width of div 
var width = $div.width(); 

// width of ul - width of div 
var ulWidth = $ul.width() - width; 

$div 
    .on('mouseenter', function(e) { 
     // get left offset of div on page 
     var divLeft = $div.offset().left; 

     $(window).on('mousemove', function(e) { 
      var left = e.pageX - divLeft; 
      // get percent of width the mouse position is at 
      var percent = left/width; 

      // set margin-left on ul to achieve a 'scroll' effect 
      $ul.css('margin-left', -(percent * ulWidth)); 
     }); 
    }) 
    .on('mouseleave', function() { 
     // remove mousemove event 
     $(window).off('mousemove'); 
    }) 
;​ 

http://jsfiddle.net/aarongloege/gQyz6/

你基本上需要基於鼠標位置的比例從視口的左側（DIV在UI元素放置我的例）。

Answer 2

看看這兩項現有的jQuery插件，做的正是你要尋找的：

1）http://manos.malihu.gr/jquery-thumbnail-scroller

2）http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/