горизонтально прокручивать 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 в моей пример).

Answer 2

Проверьте эти два существующих JQuery плагинов, которые делают именно то, что вы ищете:

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

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