Javascript 相对于光标移动的图像_Javascript_Jquery_Mousemove_Cursor Position

Javascript 相对于光标移动的图像

javascript jquery

Javascript 相对于光标移动的图像,javascript,jquery,mousemove,cursor-position,Javascript,Jquery,Mousemove,Cursor Position,我正在做这个小项目-我的光标在一个左矩形中移动，它应该出现在第二个矩形中。我已经做了一个光标的图像，我试图根据我的光标移动它，但什么也没发生。你能帮我找出错误吗？我将非常感激以下是代码片段： <html> <head> <title>Laboratory work 1_4</title> <meta charset="UTF-8"> <meta name="viewport" content="width

我正在做这个小项目-我的光标在一个左矩形中移动，它应该出现在第二个矩形中。我已经做了一个光标的图像，我试图根据我的光标移动它，但什么也没发生。你能帮我找出错误吗？我将非常感激

以下是代码片段：

<html>
<head>
    <title>Laboratory work 1_4</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #imgc{
            position: absolute;
        }
    </style>
</head>
<body>
    <img src="arrow.png" id="imgc" width="20" height="20">
    <canvas id="canvas"  width="800" height="600" ></canvas>

    <script type="text/javascript">
    var c = document.getElementById("canvas");

    var ctx = c.getContext("2d");
    ctx.rect(20, 20, 300, 200);
    ctx.stroke();
    ctx.rect(350, 20, 300, 200);
    ctx.stroke();
    </script> 

    <script type="text/javascript" src="js/libs/jquery/jquery.js">
    $("#canvas").mousemove(function(e){
        $("#imgc").stop().animate({left:e.pageX, top:e.pageY});
    });
    </script> 
</body>


实验室工作1_4
#imgc{
位置：绝对位置；
}
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
ctx.rect（20,20,300,200）；
ctx.stroke（）；
ctx.rect（350,20,300,200）；
ctx.stroke（）；
$（“#画布”）.mousemove（函数（e）{
$（“#imgc”）.stop（）.animate（{left:e.pageX，top:e.pageY}）；
});

另外，我在Netbeans的JavaScript库向导中添加了jquery库。因此，我的项目结构如下所示：

您尚未将jquery.js包含在page@RoryMcCrossan你是说像那样<代码>是的，没错that@RoryMcCrossan我添加了它（编辑了我的问题），但它仍然不起作用。它需要是它自己的实体，与你的JS代码分开，例如

/*你的JS在这里*/