Javascript 使用 jQuery 将 Div 位置设置为鼠标位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6088887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set Div position to Mouse position with jQuery
提问by Jeff
I am trying to position my Div wherever the user clicks on my Image.
我试图将我的 Div 放在用户单击我的图像的任何位置。
testis my Div, and myimgis my image.
test是我的 Div，而myimg是我的形象。
Here is my JS:
这是我的JS：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#myimg").click(function(e){
$("#test").show(2000);
$("#test").offset({left:e.pageX,top:e.pageY});
})
})
</script>
However that does not work. Can anyone tell me what I am doing wrong?
但是，这不起作用。谁能告诉我我做错了什么？
Edit: Sorry, I forgot to mention that the Div wont show up, if I include the offset line, if I dont, it shows, but not at the right position.
编辑：对不起，我忘了提到 Div 不会显示，如果我包括偏移线，如果我不显示，它会显示，但不在正确的位置。
Here is the full code:
这是完整的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xSky Software - Most likely the only software on Clickbank that exists.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='video/jwplayer.js'></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myimg").click(function(e){
$("#test").show(2000);
$("#test").offset({left:e.pageX,top:e.pageY});
})
})
</script>
</head>
<body>
<!--Header and Logo-->
<div id="header">
<div id='mainvid'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mainvid').setup({
'flashplayer': 'video/player.swf',
'file': 'video/Untitled1.mp4',
'controlbar': 'none',
'frontcolor': 'FFFFFF',
'lightcolor': 'FFFFFF',
'screencolor': 'FFFFFF',
'autostart': 'true',
'width': '709',
'height': '422'
});
</script>
</div>
</div>
<div id="test" style="width:100px; position:absolute; display:none; height:100px; border:#093 solid 2px; background:#0C6;">
Teeest
</div>
<!--Content-->
<div id="content">
<center><img src="Images/downloadbutton.png" id="myimg" /></center>
<br />
<div class="text">
OH YEAH!
</div>
</div>
<!--Footer-->
<div id="footer">
</div>
</body>
</html>
采纳答案by Codecraft
It seems to work fine. I have set up a JSFiddle for you:
它似乎工作正常。我已经为你设置了一个 JSFiddle：
Click on the image and the test div moves. The only change is using the $ short notation for JQuery instead of typing "JQuery" which, by the way is probably case sensetive and causing the problem!
单击图像，测试 div 移动。唯一的变化是对 JQuery 使用 $ 短符号而不是键入“JQuery”，顺便说一下，这可能是区分大小写并导致问题的！
回答by psibient
I think you probably want
我想你可能想要
$("#test").css({position:"absolute", left:e.pageX,top:e.pageY});
instead of
代替
$("#test").offset({left:e.pageX,top:e.pageY});
回答by Matt Ball
This works well enough for me, so your problem is likely elsewhere.
这对我来说效果很好，所以你的问题很可能在其他地方。
HTML
HTML
<img id="myimg" src="http://placekitten.com/200/300"/>
<span id="test">This is a test</span>
CSS
CSS
#test {
display: none;
color: white;
}
JavaScript
JavaScript
$(function() {
$("#myimg").click(function(e) {
var o = {
left: e.pageX,
top: e.pageY
};
$("#test").show(2000).offset(o);
});
});
