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

-3

我已经抬头一看，有一个类似的线程数，但我不能让任何人对我的工作，所以我必须在一瞬间问我的代码is.It是不同如何使用jQUERY使图像跟随鼠标指针？

<!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}); 
});

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

来源

2015-07-12 Steve

设置图像的position到absolute
获取鼠标X和ÿ坐标
应用X坐标为top作为left和ÿ坐标图像

$(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="" />

来源

2015-07-12 17:40:46

我用你的代码，它的工作，但图像总是有一定的距离任何人有任何建议。 – Steve

使用我提供的CSS –

你的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 }); 
});

来源

2015-07-12 17:41:47 IMTheNachoMan

请在相关代码中加入相关代码。否则，很好的答案！ BTW，当鼠标离开文档时，似乎更好地隐藏img：http://jsfiddle.net/1h3vsa3w/2/ –

@ A.Wolff：完成。谢谢！ – IMTheNachoMan

您正在使用jQuery的错误选择（ship一定是你的形象的一类或ID）

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

这里是一个工作plunkr

来源

2015-07-12 17:42:07 nalinc

你在建什么很简单，所以请先学会用普通的JavaScript来做。如果有什么不工作，你可以找出原因。

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

让我们来看看每一点。

为了跟踪鼠标移动，以下是足够的：

文档。的OnMouseMove =函数（e）中{

}
取决于浏览器，将 “e” 参数可以不以通过。

document.onmousemove =函数（e）中{ VAR的x， Ÿ; （e）{x = e.clientX; Y = e.clientY;}否则 {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'; 

}

来源

2015-07-12 17:42:28 Schien

喜欢这个？

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

你没有使用.selector方法瞄准类。此外，您的文档的head中有img。它需要成为body的一部分。

来源

2015-07-12 17:43:05

一段时间“。”在你的JavaScript是需要（因为你引用的类）

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

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

来源

2015-07-12 17:48:06

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

回答

相关问题