Pointer Lock API实现的图片无限3D旋转实例

前面一篇文章中《Pointer Lock API大全》，我们介绍了Pointer Lock API的相关属性，事件和方法，本文将结合一个例子来给大家带来一个案例实战。

打开本实例，默认进去会看到一个相貌平平的女生，然后点击这张图片：

点击图片触发Pointer Lock，此时鼠标会立即消失，同时图片就会根据你的鼠标位置开始翻江倒海。

而且鼠标的活动范围似乎没有边界，即使移动了一万个屏幕的宽度，我们的图片依然翻转个不停。这就是Pointer Lock API的特性表现。

相关代码如下：

CSS代码：

.box {
    line-height: 400px;
    text-align: center;
    position: relative;
    perspective: 200px;
}
.box img {
    vertical-align: middle;
}
//www.xttblog.com

HTML代码：

<div class="box">
    <img id="image" src="mm1.jpg">
	<!-- ：www.xttblog.com -->
</div>

JS代码：

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)';  
    };
	// ：www.xttblog.com
    // 触发鼠标锁定
    eleImage.addEventListener('click', function () {
        eleImage.requestPointerLock();
    });
	// ：www.xttblog.com
    // 再次点击页面，取消鼠标锁定处理
    document.addEventListener('click', function () {
        if (document.pointerLockElement == eleImage) {
            document.exitPointerLock();
        } 
    });
	// ：www.xttblog.com
    // 检测鼠标锁定状态变化
    document.addEventListener('pointerlockchange', function () {
        if (document.pointerLockElement == eleImage) {
            document.addEventListener("mousemove", rotate3D, false);
        } else {
            document.removeEventListener("mousemove", rotate3D, false);
        }
    }, false);
}

其中，应用了除了pointerlockerror事件外的其他所有属性和方法（见红色高亮）。

实现原理

点击图片，执行eleImage.requestPointerLock()让页面进入鼠标锁定状态，此时会触发'pointerlockchange'事件，于是，给页面绑定鼠标移动改变图片旋转的方法，为了避免重复绑定，我们借助document.pointerLockElement判断页面的锁定状态。最后，为了方便取消页面的锁定状态，我们在页面上绑定了点击事件，通过document.exitPointerLock()取消页面的锁定状态。

注意：event.movementX和event.movementY表示每次mousemove事件触发时候，距离上次移动的水平和垂直位置大小，而不是具体的某个坐标值。因此，需要和初始坐标不断的累加确定当前移动位置。

总结

最后说下Pointer Lock API的兼容性。

由于Pointer Lock API是与鼠标相关的API，因此所有移动端都不支持，因为没有必要支持。

对于桌面浏览器，Chrome，Firefox以及Edge浏览器都是支持的，并且现在使用可以不加私有前缀，直接走起。IE并不支持，但这并不妨碍我们进行增强使用Pointer Lock API。

： » Pointer Lock API实现的图片无限3D旋转实例