• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

CSS3 web前端中文站 2年前 (2017-10-18) 2217次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://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。

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


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Pointer Lock API 实现的图片无限 3D 旋转实例
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址