用鼠标水平滚动 ul答案

【问题标题】：horizontally scroll a ul with mouse用鼠标水平滚动 ul
【发布时间】：2012-05-22 03:53:07
【问题描述】：

如何使用鼠标光标水平滚动 ul？基本上我想模仿this 图片库的底部。我在网上找到了一个javascript方法，但它并不那么顺利。

【问题讨论】：

谢谢 Aaron，你的方法正是我想要的。

标签： javascript jquery jquery-ui jquery-tools

【解决方案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）来定位 ul 元素。

【讨论】：

【解决方案2】：

查看这两个现有的 jQuery 插件，它们完全符合您的要求：

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

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

【讨论】：