如何使用鼠标光标水平滚动 ul?基本上我想模拟 this 的底部部分图片库。我在网上找到了一个javascript方法,但它不是那么顺利。
最佳答案
<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/
您基本上需要根据鼠标位置距视口(viewport)左侧的百分比(在我的示例中为 div)来定位 ul 元素。
关于javascript - 用鼠标水平滚动 ul,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10695501/