Animate Over Shooting Mouse單擊JQuery？

我有我的JavaScript操作的基本思想。Animate Over Shooting Mouse單擊JQuery？

我的JavaScript的一點是讓id'player'的圖像移動到用鼠標點擊的位置，只有當我點擊'stage'id爲div的div並且動畫持續3秒。

與此同時，當動畫運行時，頭部應該變成'玩家正在移動'，而不是當它靜止時並顯示'玩家仍然'。

現在，在Chrome（也許是Chrome的一個bug）中，JS的基本功能就起作用了。然而，它似乎超過了我在第一輪點擊鼠標的位置，然後當我再次點擊'stage'div時幾乎沒有移動。

如果有人看到我可能遇到問題，請告訴我！

這裏是我的JQuery EDITED：

$(document).ready(function(){ 
$('#stage').click(function(e){ 
    $('#header h1').html('Player is moving!'); 
    $('#player').animate({ 
     top: e.pageY + 'px', 
     left: e.pageX + 'px' 
    }, 3000, function(){ 
     $('#header h1').html('Player is standing still...'); 
    });  
});

}）;

我已經解決了我的CSS問題，所以不用擔心，但代碼位於CSS下方，以防有人認爲問題可能存在。

謝謝！

編輯：

這裏是CSS。這個問題已經解決了，但它已經提供了方便，如果你認爲像超調圖像的問題可能在於內以任何理由：

#header { 
width: 600px; 
margin: 20px auto 10px; 
padding: 5px; 
background-color: whiteSmoke; 
border: 1px solid #aaa; 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
box-shadow: 0 0 5px #ccc; 
} 
#header h1 { 
text-align: center; 
margin: 0; 
} 
#stage { 
overflow: hidden; 
width: 600px; 
height: 400px; 
margin: 0 auto; 
padding: 5px; 
background-color: whiteSmoke; 
border: 1px solid #aaa; 
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; 
box-shadow: 0 0 5px #ccc; 
position: relative; 
} 
#player { 
position: absolute; 
width: 36px; 
}

來源

2012-09-27 ZAX

我相信e.clientX，e.clientY會更適合來獲得當前鼠標的位置。此外，請記住您希望圖像相對於鼠標點擊的位置。如果要將其居中，則必須減去圖像寬度的一半，如果要將它放在*鼠標單擊之前，請減去整個寬度。 – anson

@andbeyond我確實希望將當前鼠標點擊位置傳遞給動畫函數，因此我使用了e.client。我對你的答案的其餘部分感到困惑....請提供更多詳細信息？ – ZAX

好的，你的代碼表明你正在使用'e.pageX，e.pageY'，所以你可能想要更新它。另一方面，如果你只是使用clientX和clientY，那麼圖像左上角的點就是這個點。因此，您可能需要減去或添加一點到clientX，clientY值以根據您的喜好定位圖像。試試看，你會看到它是如何工作的。 – anson

窮人的例子：jsfiddle但在FF和Chrome工作。另外，我很好奇你失去了什麼樣的風格，總是應用簡單的顏色風格。

所以需要更多的信息，你可以分享完整的CSS？

更新：我還沒有看到Chrome的問題（與小提琴的例子）變化#stage喜歡的東西

#stage {width:600px;height:600px;background-color:#333;position:fixed;top:20;left:0;}

你的玩家vs頁說謊關於它的位置，或者你可以點擊。我希望舞臺成爲頁面上的固定項目，不移動。我沒有看到任何其他原因（在你的CSS或jQuery中）爲什麼它會超調。

來源

2012-09-27 05:10:14 KnowHowSolutions

感謝您的回覆。你的回答促使我進一步調查。正如我編輯的問題所述，我嘗試了其他一些事情，發現如果我也包含h1標籤，它實際上是h1標籤包含的自動css出錯了。現在它適用於這個問題。如果您知道如何解決超調圖像問題，我會非常感激！ – ZAX

Animate Over Shooting Mouse單擊JQuery？

回答

相關問題