Question

我掌握了JavaScript操作的基本知识。

我的JavaScript的目的是让id'player'的图像移动到我用鼠标点击的位置，只有当我点击id为'stage'并且动画持续3秒的div时。

同时，当动画运行时，头部应改为“玩家正在移动”，而不是当它处于静止状态并且显示“玩家仍然是”时。

目前，在Chrome中（可能是Chrome的一个错误），JS的基本功能正常运行。但是，它似乎超过了我在第一轮点击鼠标的位置，然后当我再次点击“舞台”div时几乎没有移动。

如果有人看到我可能遇到问题的地方，请告诉我！

这是我的EDITED 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;
}

Answer 1

穷人的例子：jsfiddle但它适用于FF和Chrome。此外，我很好奇你失去了什么风格，总是应用简单的颜色风格。

需要更多信息，你能分享完整的CSS吗？

更新：我还没有在chrome中看到问题（使用小提琴示例）将#stage更改为

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

您的播放器与网页的位置或您可以点击的位置。我希望舞台成为页面上的固定项目，不动。我没有看到任何其他原因（在你的CSS或jQuery中）为什么它会超调。

动画拍摄鼠标单击JQuery？

1 个答案: