javascript - 在 div 内移动光标图像

Question

我开始开发一款狙击手游戏，但我发现在 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 中？

Answer 1

我不建议使用 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 元素来渲染图形。