如何使用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使圖像跟隨鼠標指針？

回答

相關問題