鼠标移动模拟3D旋转

最新推荐文章于 2024-12-25 16:34:32 发布

eling-

最新推荐文章于 2024-12-25 16:34:32 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/second_boy/article/details/80526810

javascript 专栏收录该内容

40 篇文章

订阅专栏

鼠标移动模拟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";
	}

点击demo体验地址