相对于光标JS移动图像

时间:2017-04-21 09:20:36

标签: javascript jquery mousemove cursor-position

我正在做这个小项目 - 我的光标在左边的矩形中移动,它应该出现在第二个中。我已经制作了光标图像,我试图根据光标移动它,但没有任何反应。你能帮我找到错误吗?我将非常感激!

以下是代码段:

<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>

P.S。我在Netbeans的JavaScript库向导中添加了jquery库。所以我的项目结构如下:

enter image description here

0 个答案:

没有答案