使用jQuery将Div位置设置为鼠标位置 [英] Set Div position to Mouse position with jQuery
问题描述
$ b
测试是我的Div，而 myimg 这是我的JS： 然而，这是行不通的。任何人都可以告诉我我做错了什么？ 编辑：对不起，我忘了提及该部门不会出现，如果我包含偏移线，如果我不，它显示，但不是在正确的位置。 以下是完整的代码： 它似乎很好。我已经为你设置了一个JSFiddle： 点击图片，测试div移动。唯一的变化是使用JQuery的$ short表示法，而不是键入JQuery，顺便说一下，这可能是个案感知并导致问题！ I am trying to position my Div wherever the user clicks on my Image. test is my Div, and myimg is my image. Here is my JS: 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. Here is the full code:
It seems to work fine. I have set up a JSFiddle for you: 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! 这篇关于使用jQuery将Div位置设置为鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< script type =text / javascriptsrc =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}）;
}）
}）
< /脚本>
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title> xSky软件 - 最有可能是唯一存在的Clickbank软件。< / title>
< link href =style.css =stylesheettype =text / css/>
< script type ='text / javascript'src ='video / jwplayer.js'>< / script>
< script type =text / javascriptsrc =jquery.js>< / script>
< script type =text / javascript> $（$＃
$（document）.ready（function（）{
$（＃myimg）。click（function（e）{
$（＃test）。 ;
$（＃test）。offset（{left：e.pageX，top：e.pageY}）;
}）
}）
< /脚本>
< / head>
< body>
<！ - 标题和徽标 - >
< div id =header>
< div id ='mainvid'>此文字将被替换< / 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 =teststyle =width：100px; position：absolute; display：none; height：100px; border：＃093 solid 2px; background：＃0C6 ;>
Teeest
< / div>
<！ - - 内容 - >
< div id =content>
< center>< img src =Images / downloadbutton.pngid =myimg/>< / center>
< br />
< div class =text>
OH YEAH！
< / div>
< / div>
<！ - Footer - >
< div id =footer>
< / div>
< / body>
< / html>
<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>
<!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>
