[英]Set Div position to Mouse position with jQuery
我试图在用户点击我的图像的任何地方定位我的Div。
test是我的Div, myimg是我的形象。
这是我的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>
然而,这不起作用。 谁能告诉我我做错了什么?
编辑:对不起,我忘了提到Div不会出现,如果我包括偏移线,如果我不,它显示,但不是在正确的位置。
这是完整的代码:
<!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>
我想你可能想要
$("#test").css({position:"absolute", left:e.pageX,top:e.pageY});
代替
$("#test").offset({left:e.pageX,top:e.pageY});
它似乎工作正常。 我为你设置了一个JSFiddle:
单击图像,测试div移动。 唯一的变化是使用JQuery的$ short表示法而不是键入“JQuery”,顺便说一句,这可能是案例性的并导致问题!
这对我来说效果很好,所以你的问题可能在其他地方。
<img id="myimg" src="http://placekitten.com/200/300"/>
<span id="test">This is a test</span>
#test {
display: none;
color: white;
}
$(function() {
$("#myimg").click(function(e) {
var o = {
left: e.pageX,
top: e.pageY
};
$("#test").show(2000).offset(o);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.