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

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

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

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

点击图片触发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旋转实例

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

原创文章,作者:506227337,如若转载,请注明出处:https://blog.ytso.com/tech/aiops/251295.html

(0)
上一篇 2022年5月2日 08:27
下一篇 2022年5月2日 08:31

相关推荐

发表回复

登录后才能评论