jQuery根据鼠标位置移动div

Question

我在使用 jQuery 时遇到了一些小问题，也许你们可以帮助我。为了更好地理解，这里是 jfiddle 中的 HTML 标记:

jsfiddle

我想让名为#move_me 的 div 根据鼠标在 #content_wrapper 中的位置在 #content_wrapper 中向右或向左移动>.

基本上我想要的是:如果我将光标在 #content_wrapper div 中向右移动，那么 #move_me div 应该向左移动以查看 content2 div ，当我向左移动时，#move_me div 应该向右移动以查看 content1 div..

我试图让它与 mousemove 和 pageXoffset 一起工作，但我没有让它工作。

像这样:

$('#content_wrapper').mousemove(function(e){
var x = e.pageX - this.parentoffsetLeft;
$('#move_me').css({'left': x}); 
});

这里有一张图片可以更准确地解释:

Illustration http://www.22labs.com/moveme.jpg

Answer 1

工作 DEMO

试试这个

我想这就是您所需要的，将 position:relative; 添加到您的 move_me

代码

$('#content_wrapper').mousemove(function (e) {

    $('#move_me').animate({
        'left': -e.pageX + 15 + 'px'
    }, 0);

});

希望对你有帮助，谢谢