logo标签列表

使用Javascript隐藏光标并停止移动

javascripthtmlbrowsercursor
3
我正在制作一款3D游戏，需要的摄像机与《魔兽世界》中的摄像机基本相同。这意味着，一旦屏幕被点击，光标会消失，并且当鼠标移动时，摄像机围绕一个焦点（玩家）旋转。
我已经编写了大部分代码，当屏幕被点击时，光标确实消失了，但问题在于即使其未显示，它仍然在移动。这感觉不自然，我希望整个时间光标都保持在同一位置。
那么，如何使用Javascript实现这一点？
唯一的支持要求是Chrome和Firefox的最新版本。
类似的问题在这里：[链接]（http://gamedev.stackexchange.com/questions/9105/how-to-implement-mouselook-in-the-browser） - Jay
2个回答
3

在JavaScript中，您不能像那样操纵光标的位置，因为这会带来安全隐患。

2
就像我说的那样，我知道如何隐藏光标。document.body.style.cursor = "none" 就可以搞定。 - corazza
1
@Bane 啊，那么你关于光标位置的问题的答案是，由于浏览器安全限制，你无法操纵光标位置 :) - Mathew Thompson
3
@Bane 是的，我同意，但是想象一下那些垃圾网站如果控制了你的光标会怎样？不好 :) - Mathew Thompson
@TrevorSenior 很好的问题！我刚刚进行了一些谷歌搜索，但只找到了如何更改光标图像，而不是位置。可能又是另一个安全限制吧？ - Mathew Thompson
3

如果我理解您的问题正确的话,

不可能通过Javascript实现，您需要使用Flash。

但是，一些进展正在进行中，

指针锁定API

更新：（我有空闲时间，所以我尝试了一下）

您可以尝试这样做，它不完美，不建议使用，并且当原始鼠标到达屏幕边缘时会失败（但是您可以在包装器中限制鼠标移动，这将解决问题）。

Html：

<body style='width:100%;min-height:800px;overflow:hidden'>  
<img id='fakeCursor' src='http://i50.tinypic.com/359d3km.jpg'  style='z-index:1000;position:absolute;display:none' />  
<div href='javascript:void(0);' style='position:absolute;left:50px;top:10px;width:100px;height:100px;background:gray;' onclick='console.log("fake click 1");return false;'>Fake click 1</div>
<div href='javascript:void(0);' style='position:absolute;left:50px;top:130px;width:100px;height:100px;background:gray;' onclick='console.log("fake click 2");return false;'>Fake click 2</div>
</body>

Javascript:

var clientX,clientY;   
var fakeCursor = document.getElementById('fakeCursor'); 

var isFakeMouse = false;
document.onclick = function(e){
    if(isFakeMouse){    
        if(document.elementFromPoint(fakeCursor.style.left,fakeCursor.style.top)!=null){
            document.elementFromPoint(fakeCursor.style.left,fakeCursor.style.top).click();
            return false;
        }
        fakeCursor.style.display = 'inline';
        fakeLeft = clientX;
        fakeTop = clientY;
        var mouseLastLeft = -1;
        var mouseLastTop = -1;
        document.onmousemove = function(e){  
            if(mouseLastLeft ===-1 && mouseLastTop ===-1){
                mouseLastLeft = e.clientX;
                mouseLastTop = e.clientY;
                return;
            } 
            fakeCursor.style.left = (parseInt(fakeCursor.style.left) + ((mouseLastLeft - e.clientX)*-1)) + 'px';
            fakeCursor.style.top = (parseInt(fakeCursor.style.top) + ((mouseLastTop - e.clientY)*-1)) + 'px'; 
            mouseLastLeft = e.clientX;
            mouseLastTop = e.clientY;
        }
    }
    else{
        isFakeMouse = true;
        document.body.style.cursor = "none";
        fakeCursor.style.display = 'none';
        fakeCursor.style.left = clientX = e.clientX;
        fakeCursor.style.top = clientY = e.clientY;
        document.onmousemove = null;
    }
}

在这里，首次点击“文档”时，会隐藏“真实鼠标”。当用户再次点击“文档”时，“真实鼠标”仍然会被隐藏，一个新的“假鼠标”（一张图片）将取代其位置。“假鼠标”的位置将与用户离开“真实鼠标”的位置相同。“假鼠标”会尝试像“真实鼠标”一样工作。非常抱歉使用了内联CSS和javascript。
闪存就在那里失去了它。不，Flash即将消亡，我没有计划使用它。感谢你提供的链接！ - corazza
@Bane，我已经编辑了我的答案并添加了一些代码。你可以尝试我的代码 :) 虽然不建议这样做，但至少你应该看看它。也许它会给你找到另一种方法的方向。 - Jashwant
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接