Question

我已经抬起头来，有一些类似于此的线程但是我不能让它们中的任何一个对我有用所以我现在必须问我的代码是。它是不同的

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="stylespacewars.css" />
        <script src="jsspacewars.js"></script>
        <script src="jquery.js"></script>
        <img class="Ship" src="Ally ship.gif" alt="HTML5 Icon" >
        <img class="EnemieBasic" src="Basic enemie.gif" alt="HTML5 Icon" >
        <img class="Core" src="Corelevel1.gif" alt="HTML5 Icon" >
        <img class="Shot" src="Shot.gif" alt="HTML5 Icon" >
    </head>
    <body>

    </body>
</html>

然后我在css中有另一部分代码

html, body {
    width: 100%;
    height: 100%;
    background-color: black; }

IMG.Core {
    display: block;
    margin-left: auto;
    margin-right: auto }

IMG.Ship {
    position:absolute;}

然后最后一部分是在Javascript中

$(document).mousemove(function(e){
    $("Ship").css({left:e.pageX, top:e.pageY});
});

这不允许图像船跟随鼠标指针，任何人都可以帮助纠正这一点。

Answer 1

你的HTML和JS有点不对劲。 img标记位于body。对于jQuery，您需要在按类名引用时使用.。

http://jsfiddle.net/imthenachoman/1h3vsa3w/1/

HTML：

<body>
    <img class="Ship" src="Ally ship.gif" alt="HTML5 Icon" />
    <img class="EnemieBasic" src="Basic enemie.gif" alt="HTML5 Icon" />
    <img class="Core" src="Corelevel1.gif" alt="HTML5 Icon" />
    <img class="Shot" src="Shot.gif" alt="HTML5 Icon" />
</body>

JavaScript：

$(document).mousemove(function (e)
{
    $(".Ship").css({ left: e.pageX, top: e.pageY });
});

Answer 2

您正在构建的内容很简单，因此请先学习使用纯JavaScript。如果有什么不起作用，你可以找到确切原因。

使图像跟随鼠标光标有三个方面。 1. onmousemove事件正常发射？你得到了正确的坐标吗？ 3.职位更新是否有效？

让我们看看每一点。

要跟踪鼠标移动，以下就足够了：

document.onmousemove =函数（E）{

}
取决于浏览器，＆＃34; e＆＃34;参数可能无法传入。

document.onmousemove =函数（e）中{ var x，y; if（e）{x = e.clientX; Y = e.clientY;} else {x = event.clientX; y = event.clientY;}

}
定位船。为图像提供ID：

尝试以下几行，看看你确实可以移动它：

var ship=document.getElementById('ship');
ship.style.top='200px';
ship.style.left='100px';

如果上述代码有效，您可以将其与上一个代码段结合使用：

document.onmousemove=function(e){
  var x, y;
  if (e) {x=e.clientX; y=e.clientY;} 
  else {x=event.clientX;y=event.clientY;}

var ship=document.getElementById('ship');
ship.style.top=y+'px';
ship.style.left=x+'px';

}

Answer 3

将图片的position设置为absolute
获取鼠标的 X 和 Y 坐标
将 X 坐标应用为left，将 Y 坐标应用为top至图像

$(document).ready(function(){
  $(document).mousemove(function(e){
    $('img').css('left',e.pageX+"px");
    $('img').css('top',e.pageY+"px");
  });
});

img {
  position: absolute;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://herbadmother.com/wp-content/themes/thesis_18/custom/rotator/sample-1.jpg" alt="" />

Answer 4

您使用错误的选择器与jQuery（ship必须是您的图像的类或ID）

$(document).mousemove(function(e){
    $("#ship").css({left:e.pageX, top:e.pageY});
});

这是一个有效的plunkr

Answer 5

喜欢这个吗？

http://jsfiddle.net/JPvya/1275/

您未使用.selector方法定位该类。此外，您的文档img中有head。它必须是body。

的一部分

Answer 6

一段时间＆＃34;。＆＃34;你的Javascript中需要（因为你引用了一个类）

$(document).mousemove(function(e){
    $(".Ship").css({left:e.pageX, top:e.pageY});
});

https://jsfiddle.net/tf9qebnv/1/

如何使用jQUERY使图像跟随鼠标指针？

6 个答案: