0

私は JavaScript 操作の基本的な考え方を持っています。

私の JavaScript のポイントは、id 'player' の画像をマウスでクリックした位置に移動させることです。アニメーションが 3 秒間続く 'stage' の id を持つ div をクリックした場合にのみです。

同時に、アニメーションが実行されているときは、頭が静止していて「プレイヤーは静止しています」と表示されるのではなく、「プレイヤーが動いています」に変わります。

現在、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;
}
4

1 に答える 1

0

貧しい人の例: jsfiddle ですが、FF と Chrome で動作します。また、どのようなスタイルを失うのか気になるところですが、常にシンプルなカラー スタイルが適用されます。

より多くの情報が必要です。完全な css を共有できますか?

更新: Chrome でまだ問題が発生していません (フィドルの例を使用) #stage を次のように変更します

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

あなたのプレーヤー対ページは、その位置またはクリックできる場所について嘘をついています。ステージはページ上に固定され、動かないようにしたかったのです。オーバーシュートする他の理由は (CSS または jQuery で) わかりません。

</p>

于 2012-09-27T05:10:14.710 に答える