使用jQuery将Div位置设置为鼠标位置

Question

使用jQuery将Div位置设置为鼠标位置

12

我正在尝试在用户点击我的图像时将我的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>

- Jeff

请提供关于“不起作用”的具体细节。 - Matt Ball

试试SSCCE怎么样？ - Matt Ball

@Matt- 抱歉，我匆忙之中。 - Jeff

我的错 - 图像重叠了div。 - Jeff

3个回答

8

看起来工作正常。我已经为您设置了一个JSFiddle：

http://jsfiddle.net/JPvya/

点击图片，测试div就会移动。唯一的变化是使用$短符号代替打字的“JQuery”，顺便说一下，这可能是大小写敏感导致的问题！

- Codecraft

那么正如你所建议的 - 问题在别处 :-) - Codecraft

接受了这个，因为它帮助我确定了实际原因。 - Jeff

3

这对我来说足够有效，所以你的问题可能出在其他地方。

HTML

<img id="myimg" src="http://placekitten.com/200/300"/>
<span id="test">This is a test</span>

CSS

#test {
    display: none;
    color: white;
}

JavaScript

$(function() {
    $("#myimg").click(function(e) {
        var o = {
            left: e.pageX,
            top: e.pageY
        };
        $("#test").show(2000).offset(o);
    });
});

http://jsfiddle.net/mattball/haFMn/

- Matt Ball

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- psibient · Accepted Answer

我想你可能想要

$("#test").css({position:"absolute", left:e.pageX,top:e.pageY});

而不是

$("#test").offset({left:e.pageX,top:e.pageY});