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

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

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

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

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.lisa33xiaoq.net

HTML代码:

 <div class="box">     
 <img id="image" src="mm1.jpg">  
 <!-- web前端中文站:www.lisa33xiaoq.net --> 
 </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)';};  // web前端中文站:www.lisa33xiaoq.net     
 // 触发鼠标锁定     
 eleImage.addEventListener('click', function () {         
 eleImage.requestPointerLock();     });  // web前端中文站:www.lisa33xiaoq.net     
 // 再次点击页面,取消鼠标锁定处理     
 document.addEventListener('click', function () {         
 if (document.pointerLockElement == eleImage) {             
 document.exitPointerLock();         }      });  
 // web前端中文站:www.lisa33xiaoq.net     
 // 检测鼠标锁定状态变化     
 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事件触发时候,距离上次移动的水平和垂直位置大小,而不是具体的某个坐标值。因此,需要和初始坐标不断的累加确定当前移动位置。

web前端中文站点评:

最后说下Pointer Lock API的兼容性,由于Pointer Lock API是与鼠标相关的API,因此所有移动端都不支持,因为没有必要支持。对于桌面浏览器,Chrome,Firefox以及Edge浏览器都是支持的,并且现在使用可以不加私有前缀,直接走起。IE并不支持,但这并不妨碍我们进行增强使用Pointer Lock API。

【注:本文源自网络文章资源,由站长整理发布】

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到