2

狙撃ゲームの開発を開始しましたが、狙撃兵の画像を div 内で移動する際に問題が発生しています。私の主な目標は、マウスが div の上にあるときに、その画像を狙撃兵の画像に変更したいということです。

<center>
    <div id="field" class="cursor1">
        &nbsp;
    </div>
</center>

<script type="text/javascript">
    $(document).ready(function() {
        $("#field").mouseover(function() {
            $(this).addClass("cursor");

        });
    });
</script>
<style type="text/css">
    #field
    {
        width:300px;
        height:300px;
        border:1px solid;
    }
    .cursor
    {
        cursor:url("sniper.jpg") ;
    }
</style>

しかし、それはうまくいきませんでした。div内で画像を移動するにはどうすればよいですか?

ここに画像の説明を入力

4

3 に答える 3

3

マウスカーソルを実際の画像に置き換えると、画像サイズを調整して中央に配置する方が簡単なので、マウス画像をcssで設定することはお勧めしません。

$('#box').mouseenter(function(){ 
    $('img').css('display','block');
});

$('#box').mouseleave(function(){ 
    $('img').css('display','none');
});

$("#box").mousemove(function(event) {
    $('img').css('left',event.pageX-20);
    $('img').css('top',event.pageY-20);
});

このhttp://jsfiddle.net/N9pu4/の簡単な例を作成しました

また、グラフィックスのレンダリングに canvas 要素を使用することも検討してください。

于 2013-06-01T09:10:56.397 に答える
0

このプロパティの基本的な (CSS 2.1) 構文は次のとおりです。

cursor:  [<url>,]* keyword

これは、0 個以上の URL を指定 (コンマ区切り) できることを意味し、その後に auto や pointer など、CSS 仕様で定義されているキーワードの 1 つを続ける必要があります。

( https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url?redirectlocale=en-US&redirectslug=CSS%2Fcursor%2Furlを参照)

したがって、フォールバック値を指定する必要があります。

.cursor
{
    cursor:url("sniper.jpg"), auto;
}
于 2013-06-01T08:32:29.313 に答える