来自于张鑫旭空间。
一个例子，让图片在点击后 ，进入鼠标锁定（消失）状态，鼠标动X y值还是有的，图片随着x y值变化，旋转。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { line-height: 400px; text-align: center; position: relative; perspective: 2000px; } .box img { vertical-align: middle; width: 200px; height: 200px; } </style> </head> <body> <div class="box"> <img id="image" src="../images/1.jpg"> <img src="../images/2.jpg"> </div> </body> </html> <script> var eleImage = document.getElementById('image'); if(eleImage) { // 起始值 var moveX = 0, moveY = 0; // 图片无限变换的方法 var rotate3D = function(event) { moveX = moveX + event.movementX; moveY = moveY + event.movementY; eleImage.style.transform = 'rotateX(' + moveY + 'deg) rotateY(' + moveX + 'deg) rotateZ(' + moveY + 'deg)'; }; // 触发鼠标锁定 eleImage.addEventListener('click', function() { // 可以让页面进入鼠标锁定状态（鼠标直接消失），鼠标无限滚动，坐标无限变化 eleImage.requestPointerLock(); }); // 再次点击页面，取消鼠标锁定处理 document.addEventListener('click', function() { // document.pointerLockElement用来获取当前页面 无限滚动的元素时那个 if(document.pointerLockElement == eleImage) { // 让页面从鼠标锁定状态退出，通常使用语法为 document.exitPointerLock(); } }); // 检测鼠标锁定状态变化 // 当页面鼠标锁定状态改变的时候触发。 document.addEventListener('pointerlockchange', function() { if(document.pointerLockElement == eleImage) { document.addEventListener("mousemove", rotate3D, false); } else { document.removeEventListener("mousemove", rotate3D, false); } }, false); } </script>
eleImage.requestPointerLock(); 某个元素触发鼠标锁定。
document.exitPointerLock(); 当前页面退出鼠标锁定。
document.pointerLockElement。获取开启鼠标锁定的元素。
document.addEventListener('pointerlockchange', function() {}）；页面绑定 鼠标锁定时，鼠标动了，触发某个函数。