Question

我对jQuery有点问题，也许你们可以帮助我。以下是jfiddle中的HTML标记，以便更好地理解：

我希望根据#content_wrapper内的鼠标位置，将名为#move_me的div移动到#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);

});

希望这有帮助，谢谢

Answer 2

我部分写了一个解决方案。希望这就是你所需要的。

http://jsfiddle.net/NukSy/4/

$('div#content1').mousemove(function(p) {     
    $("div#content1").css('left', p.pageX + moveLeft);
    $("div#content2").animate({left: "0px"}, 500);
  });

问候：））

Answer 3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).mousemove(function(event){
$("div").attr("style","padding-left:"+event.pageX+"px; padding-top:"+event.pageY+"px");
});
});
</script>

<div style="">
<form>
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<input type="submit" value="submit"/>
</form>
</div>

jQuery根据鼠标位置移动div

3 个答案:

工作DEMO

码