3

我在 jQuery 上遇到了一点问题,也许你们可以帮助我。这是 jfiddle 中的 HTML 标记,以便更好地理解:

jsfiddle

我想让名为 #move_me 的 div#content_wrapper根据内部的鼠标位置移动到右侧或左侧#content_wrapper

基本上我想要的是:如果我将光标在#content_wrapperdiv 内向右移动,那么#move_mediv 应该向左移动以查看 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

4

3 回答 3

7

工作演示

尝试这个

我想这就是你需要的,添加position:relative;到你的move_me

代码

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

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

});

希望这会有所帮助,谢谢

于 2013-11-02T12:12:51.700 回答
2

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

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

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

问候 :))

于 2013-08-20T15:54:29.743 回答
0
<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>
于 2013-11-02T10:51:06.100 回答