jQuery根据鼠标位置移动div
jQuery根据鼠标位置移动div
提问于 2013-08-20 23:08:24
我和jQuery有点小问题也许你们能帮我。为了更好地理解，下面是jfiddle中的HTML标记：
jsfiddle
我想让名为#move_me的div在#content_wrapper中根据鼠标在#content_wrapper中的位置向右或向左移动。
基本上我想要的是:如果我将光标从#content_wrapper分区中向右移动，则#move_me分区应向左移动以查看content2分区，当我向左移动时，#move_me分区应向右移动以查看content1分区。
我试着让它与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
回答 3
Stack Overflow用户
发布于 2013-11-02 20:12:52
工作DEMO
尝尝这个
我想这就是您需要的，将position:relative;添加到您的move_me中
代码
$('#content_wrapper').mousemove(function (e) {
$('#move_me').animate({
'left': -e.pageX + 15 + 'px'
}, 0);
});希望这能有所帮助，谢谢
Stack Overflow用户
发布于 2013-08-20 23:54:30
我写了一部分解决方案。希望这就是你需要的。
http://jsfiddle.net/NukSy/4/
$('div#content1').mousemove(function(p) {
$("div#content1").css('left', p.pageX + moveLeft);
$("div#content2").animate({left: "0px"}, 500);
});致敬：)
Stack Overflow用户
发布于 2013-11-02 18:51:06
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18338608
复制相关文章
相似问题
腾讯云开发者
