如何使用鼠标光标水平滚动 ul?基本上我想模仿这个图片库的底部。我在网上找到了一个javascript方法,但它并不那么顺利。
问问题
2690 次
2 回答
2
<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 元素。
于 2012-05-22T04:34:58.677 回答
0
查看这两个现有的 jQuery 插件,它们完全符合您的要求:
1) http://manos.malihu.gr/jquery-thumbnail-scroller
2) http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/
于 2012-10-26T07:44:38.120 回答