鼠标指针将div的中心定位在第一个和最后一个元素上

Question

我看到了这个jquery示例，它根据鼠标在mouseenter或mousemove上的位置将div向左或向右设置动画。它使用一个名为$.strottle的jquery类，该类每毫秒执行一次代码。我想知道是否有人知道如何将鼠标指针放在第一个和最后一个div元素上，或者放在每个div元素的中心，这样在向左或向右滚动元素时，就不必将鼠标指针直接放在边缘。基本上，我希望它有一个极限，它也不能过去。当你把鼠标指针放在这个例子上时，你会看到我在说什么点击这里jsFiddle这个例子是在jquery 1.5 中完成的

HTML

<div id="wrapper">
<ul id="scroll-content">
<li class="item"><img src="http://placehold.it/100x150/09f" /></li>
<li class="item"><img src="http://placehold.it/100x150/2f2" /></li>
<li class="item"><img src="http://placehold.it/100x150/234" /></li>
<li class="item"><img src="http://placehold.it/100x150/342" /></li>
<li class="item"><img src="http://placehold.it/100x150/312" /></li>
<li class="item"><img src="http://placehold.it/100x150/131" /></li>
<li class="item"><img src="http://placehold.it/100x150/111" /></li>
<li class="item"><img src="http://placehold.it/100x150/222" /></li>
<li class="item"><img src="http://placehold.it/100x150/333" /></li>
<li class="item"><img src="http://placehold.it/100x150/122" /></li>
</ul>

CSS：

#wrapper {
width: 100%;
height: 170px;
overflow: hidden;
background-color: red;
}
#scroll-content {
width: 1050px;
}

jquery:

$(document).ready(function() {
var wrapper = $('#wrapper'),
content = $('#scroll-content');
wrapper.bind('mouseenter mousemove', $.throttle(200, mousemove));
function mousemove(e) {
var wrapper_width = wrapper.outerWidth(),
content_width = content.outerWidth();
//calculate new left margin
var tmp = e.pageX * (content_width - wrapper_width) / wrapper_width;
content.stop().animate({
'margin-left': '-' + tmp + 'px'
}, 'fast', 'easeOutSine');
}
});

Answer 1

我希望能理解你：

JS更改：

//exaggerate mouse-x
var exmousex = (e.pageX-100) * 1.3;
//calculate new left margin 
var tmp = exmousex * (content_width - wrapper_width) / wrapper_width;
//LIMITS
if (tmp < 0) tmp = 0;
if (tmp > content_width - wrapper_width -5 ) tmp = content_width - wrapper_width  -5;
content.stop().animate({'left': -tmp}, 'fast', 'easeOutSine');

CSS更改：

#wrapper {
position: absolute;
top:0;
left:0
}
#scroll-content {
position: relative;
}

尝试：http://jsfiddle.net/karacas/RkbP6/181/