jQuery根据鼠标位置移动div [英] jQuery move divs according to mouse position

问题描述

我在jQuery上遇到了一些问题，也许你们可以帮助我.这是jfiddle中的HTML标记，用于更好地理解:

I got a little Problem with jQuery, maybe you guys can help me. Here's the HTML Markup in jfiddle for better understanding:

jsfiddle

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

I'd like to have the div called #move_me to move either to the right or to the left side within the #content_wrapper according to the mouse position inside #content_wrapper.

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

Basically what I want is: if I move my cursor inside the #content_wrapper div to the right then the #move_me div should move to the left to see content2 div, when I move to the left the #move_me div should move to the right to see content1 div..

我试图使其与mousemove和pageXoffset一起使用，但没有使其起作用.

I tried to get it to work with mousemove and pageXoffset but I didn't get it to work.

类似这样的东西:

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

这里的图像更加精确:

插图http://www.22labs.com/moveme.jpg

推荐答案

正在工作演示

尝试一下

Working DEMO

Try this

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

I guess this is what you need, Add position:relative; to your move_me

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

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

});

希望这会有所帮助，谢谢

Hope this helps, Thank you

这篇关于jQuery根据鼠标位置移动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！