鼠标移动模拟3D旋转
原理:首先得有360度每个角度的图片,再利用鼠标移动来切换对应的图片打开和关闭,模拟一个3D效果
实现过程:
- 获取屏幕宽度
- 获取360度图片数量
- 屏幕宽度 / 图片数量 = 鼠标移动多少位置打开第一张图片(例如:1000 / 10 = 移动10像素内打开第一张图,移动到20像素时打开第二张图 ......)
- 获取鼠标坐标 / 每一等分的像素 = 当前鼠标在第几个等分的位置
- 关闭所有图片,打开当前图片
html代码:
每一个li代表每一个角度的图片
<ul class="picMove" id="picMove">
<li class="haige_1 haige_sp"></li>
<li class="haige_2 haige_sp"></li>
<li class="haige_3 haige_sp"></li>
<li class="haige_4 haige_sp"></li>
<li class="haige_5 haige_sp"></li>
<li class="haige_6 haige_sp"></li>
<li class="haige_7 haige_sp"></li>
<li class="haige_8 haige_sp"></li>
<li class="haige_9 haige_sp"></li>
<li class="haige_10 haige_sp"></li>
<li class="haige_11 haige_sp"></li>
<li class="haige_12 haige_sp"></li>
<li class="haige_13 haige_sp"></li>
<li class="haige_14 haige_sp"></li>
<li class="haige_15 haige_sp"></li>
</ul>
Javascript代码:
var picMove = document.getElementById("picMove");
var picMoveLi = picMove.getElementsByTagName("li");
var e2T = document.getElementById("e2T");
// 获取屏幕宽度
var cleW = document.documentElement.clientWidth || document.body.clientWidth;
for (var i = 0; i < picMoveLi.length; i++) {
picMoveLi[i].style.display = "none";
};
picMoveLi[0].style.display = "block";
e2T.onmousemove = function(e){
console.log(1)
var e = e || window.event;
// 获取鼠标坐标
var x = e.pageX || e.clientX + scrollX;
// 获取相对屏幕宽度对应的每一张图片需要移动多少像素
var moveNum = cleW / picMoveLi.length;
// 获取鼠标坐标 / 每一等分的像素 = 当前鼠标在第几个等分的位置
var liNum = parseInt(x / moveNum);
for (var i = 0; i < picMoveLi.length; i++) {
picMoveLi[i].style.display = "none";
};
picMoveLi[liNum].style.display = "block";
}