我对我的 JavaScript 操作有了基本的想法。
我的 JavaScript 的重点是使 id 'player' 的图像移动到我用鼠标单击的位置，只有当我点击 id 为 'stage' 的 div 时，动画持续 3 秒。
同时，当动画运行时，头部应该变为“玩家正在移动”，而不是在静止时显示“玩家静止”。
现在，在 Chrome 中（可能是 Chrome 的一个错误），JS 的基本功能可以正常工作。但是，它似乎超出了我在第一轮单击鼠标的位置，然后当我再次单击“舞台”div 时几乎没有移动。
如果有人看到我可能遇到问题的地方，请告诉我！
这是我编辑的 JQuery：
$(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;
}