2

画面に一連のボタンが表示されます。ボタン（クラス「ボタン」を持つ）にカーソルを合わせると実行される関数を実装しようとしています。

この関数は、ボタンの中央にマウス ポインターを表示する必要があります。つまり、実際のマウス ポインターがボタン上にある間、マウス ポインターはボタンの中央に表示されます。APIを使用してみましたRequestPointerLockが、これはマウス ポインターを非表示にしますが、表示したいのですが、イベント ハンドラーでのみ機能すると思いますonclick。

これは私がこれまでに行ったことです：

var buttons = document.getElementsByClassName('button');
buttons.requestPointerLock = buttons.requestPointerLock || buttons.mozRequestPointerLock;
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
document.addEventListener('pointerlockchange', lockChangeAlert, false);
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);

function lockChangeAlert() 
{
    if (document.pointerLockElement === buttons || document.mozPointerLockElement === buttons) 
    {
        console.log('The pointer lock status is now locked');
        document.addEventListener("mousemove", updatePosition, false);
    } else 
    {
        console.log('The pointer lock status is now unlocked');  
        document.removeEventListener("mousemove", updatePosition, false);
    }
}

function updatePosition(e) 
{
}

buttons.onclick = function()
{
     buttons.requestPointerLock();
}

これをどのように実装できるかについてのアイデアはありますか?

4

2 に答える 2

3

JavaScript を使用してカーソルの位置を設定する方法はありません。これは、多くのセキュリティ上の考慮事項に反します。あなたができる最善の方法は、カーソルを非表示にすることです（cursor: noneonを使用:hoverして、ボタンの中央に1つの静止画像を描画します.

この方法を選択すると、異なるシステムでのカーソル アイコンの不一致が問題になることに注意してください。

他のいくつかの JavaScript API と同様に、requestPointerLockなどのイベントでは機能しませんmouseover( とは異なりrequestFullscreenます)。それらが機能するには、ユーザーとの直接的なやり取りが必要です。などのイベントは、mouseover簡単に悪用される可能性があります。

Pointer Lock APIの例では、キャンバスを使用して円をキャンバスに描画します。

于 2016-11-25T07:35:45.050 に答える
2

これは役立つかもしれません。

button {
  background: #333;
  position: relative;
  color: #fff;
  padding: 40px 80px;
  border: none;
  font-size: 32px;
}
button:hover {
  cursor: none;
}
button:hover:after {
  content: '';
  background-image: url("http://www.freeiconspng.com/uploads/original-file---svg-file-nominally-550--400-pixels-file-size-3--23.png");
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
}
<button>Here</button>

これもcodepenです：http://codepen.io/hunzaboy/pen/pNwOqZ

于 2016-11-25T08:02:29.917 に答える