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

我正在制作一款3D游戏，其中的相机需要与魔兽世界非常相似。这意味着，一旦点击屏幕，光标消失，当鼠标移动时，相机围绕焦点（玩家）旋转。隐藏光标并使其停止移动使用Javascript

我做了大部分的代码，当点击屏幕时光标确实消失，但问题是它仍在移动，即使它没有显示。这感觉不自然，我希望光标始终保持在同一个位置。

那么，我该如何用Javascript实现这一目标呢？

唯一的支持请求是最新版本的Chrome和Firefox。

来源

2012-05-29 corazza

类似的问题在这里：[链接]（http://gamedev.stackexchange.com/questions/9105/how-to-implement-mouselook-in-the-browser ） –

由于存在安全隐患，您不能像JavaScript那样操作游标的位置。

来源

2012-05-29 18:34:38 mattytommo

正如我所说，我知道如何隐藏光标。 'document.body.style.cursor =“none”'这样做。 – corazza

@Bane啊，那么你的位置问题的答案是，你不能操纵光标位置，因为浏览器的安全限制:) – mattytommo

该死的，这真的很蹩脚。我的意思是，我明白了为什么，但仍然... – corazza

如果我正确让你的问题，

不可能通过JavaScript，您需要安装Flash。

但是，是的，有些陆侃是怎么回事，

Pointer lock 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; 
    } 
}

这里，先点击document的real mouse皮。当用户再次点击document时，real mouse将仍然隐藏，并且新的fake mouse（图像）将取代它。用户离开real mouse时，fake mouse的位置将相同。 fake mouse工作（尝试）像real mouse一样工作。

对不起，内联CSS和javascrict

来源

2012-05-29 19:17:16 Jashwant

>闪光灯\ n 迷失在那里。不，Flash会死的，我不打算使用它。感谢您的链接！ – corazza

@Bane，我编辑了我的答案并添加了一些代码。你可以尝试我的代码:)它不建议，但你应该至少看到它。可能会给你一个找到另一种方式的方向 – Jashwant

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

回答

相关问题