-1

私のウェブサイトには、訪問者がクリックして撃つためのいくつかの目標を持つセクションがあります。セクションに使用cursor: crosshairしています。訪問者がターゲットセクションのどこかをクリックしたときに、アニメーションを残したいbullet_hole.gif

コードのコマンドはdivコンテナ内にあると思います onmouse click create adivクリックの場所で、div5秒後に削除します。

これを行うには、javascript/jQuery コードをどのように記述すればよいですか?

4

1 に答える 1

2

コンテナー内のクリックの位置を取得するには、jQuery クリック ハンドラーに渡されたイベント オブジェクトからoffsetXおよびプロパティを取得します。次に、表示される銃弾の穴の画像を含むその位置にoffsetY絶対配置された を作成できます。divそこからタイマーを使用して、5 秒後にその div を削除できます。このようなもの：

$('#target').click(function(e) {
    $('<div />').addClass('bullet-hole').css({
        top: e.offsetY - 5,
        left: e.offsetX - 5
    }).appendTo('#target');
    setTimeout(removeBulletHole, 5000);
});

function removeBulletHole() {
    $('#target .bullet-hole:not(:animated):first').fadeOut(function() {
        $(this).remove();
    });
}

フィドルの例

于 2015-12-20T22:16:55.373 に答える