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

HTML5 herman 440浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

前面一篇文章中《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。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » Pointer Lock API实现的图片无限3D旋转实例