1.新建一个pointerLock.js如下,之后引入到mian.js全局使用或者引入到当前组件页面都可以:)
const pointerLock = {}
pointerLock.pointerLockEvent = function (eleImage) {
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)';
};
// 触发鼠标锁定
eleImage.addEventListener('click', function() {
eleImage.requestPointerLock();
});
// 再次点击页面，取消鼠标锁定处理
document.addEventListener('click', function() {
if (document.pointerLockElement == eleImage) {
document.exitPointerLock();
}
});
// 检测鼠标锁定状态变化
document.addEventListener('pointerlockchange', function() {
if (document.pointerLockElement == eleImage) {
document.addEventListener("mousemove", rotate3D, false);
} else {
document.removeEventListener("mousemove", rotate3D, false);
}
}, false);
}
}
export default pointerLock
2.然后新建一个小组件imgPointerLock.vue,实例化作用于每一个图片
//imgPointerLock.vue
<template>
<div>
<img :src="imgSrc" alt="" ref='eleImage'>
</div>
</template>
<script>
import pointerLock from '@/utils/pointerLock' //引入到当前组件内使用
let vm = this;
export default {
name: "imgPointerLock",
components: {
},
props: {
src: {
type: String //图片地址
}
},
data() {
return {
isLock: false,
imgSrc:require(`@/assets/images/huaji.gif`) //pointLock也支持gif图片动态效果哦~
};
},
computed: {
},
created() {
},
mounted() {
// console.log(this.$refs)
pointerLock.pointerLockEvent(this.$refs.eleImage); //调用传参并实例化
},
methods: {
}
}
</script>
<style lang='postcss' scoped>
* {
box-sizing: border-box;
}
img {
display:block;
vertical-align: middle;
width:100%;
opacity:.9;
box-shadow: 10px 10px 5px #eee;
}
</style>
//使用
<img-pointer-lock v-for="(item,index) in imgArr" :src="item.imgSrc" :key='index'></img-pointer-lock>
3.ok辣,可以自己npm run dev 试试看. 另文章参考于这里
--by Affandi ⊙▽⊙
