水平滚动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/