jQuery根据鼠标位置移动divs

Question

我在jQuery方面遇到了一些小问题，也许你们可以帮帮我。以下是HTML标记的jfiddle，以便更好地理解： jsfiddle 我想让名为#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}); 
});

这里有一张图片更精确地解释：

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

- seanarcher

Answer 1

工作中的演示

试一试

我猜这就是你需要的，将move_me添加position:relative;

代码

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

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

});

希望这能帮到您，谢谢。

- SarathSprakash

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);
  });

Regards :))

- webtech

---

谢谢你，但不幸的是，那并不完全是我想要实现的 :) - seanarcher

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>

- Uday Hiwarale