Javascript 鼠标指针将div的中心放置在第一个和最后一个元素上

Javascript 鼠标指针将div的中心放置在第一个和最后一个元素上,javascript,jquery,Javascript,Jquery,我遇到了这个jquery示例,它根据鼠标在mouseenter或mousemove上的位置来设置div向左或向右的动画。它使用一个名为$.throttle的jquery类,它每毫秒执行一次代码。我想知道是否有新手知道如何将鼠标指针放在第一个和最后一个div元素上,或者放在每个div元素的正中央,这样在向左或向右滚动元素时,就不必将鼠标指针放在边缘上。基本上我希望它有一个极限,它也不能超过。当您将鼠标指针放在示例上时,您将看到我所说的内容单击此处示例在jQuery1.5中完成 HTML jquer

我遇到了这个jquery示例,它根据鼠标在mouseenter或mousemove上的位置来设置div向左或向右的动画。它使用一个名为$.throttle的jquery类,它每毫秒执行一次代码。我想知道是否有新手知道如何将鼠标指针放在第一个和最后一个div元素上,或者放在每个div元素的正中央,这样在向左或向右滚动元素时,就不必将鼠标指针放在边缘上。基本上我希望它有一个极限,它也不能超过。当您将鼠标指针放在示例上时,您将看到我所说的内容单击此处示例在jQuery1.5中完成

HTML

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');
}
});
我希望你能理解:

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');
#wrapper {
    position: absolute;
    top:0;
    left:0
}
#scroll-content {
    position: relative;
}
尝试:

//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');
#wrapper {
    position: absolute;
    top:0;
    left:0
}
#scroll-content {
    position: relative;
}