鼠标移动模拟3D旋转

鼠标移动模拟3D旋转

原理:首先得有360度每个角度的图片,再利用鼠标移动来切换对应的图片打开和关闭,模拟一个3D效果

实现过程:

 

  1. 获取屏幕宽度
  2. 获取360度图片数量
  3. 屏幕宽度 / 图片数量 = 鼠标移动多少位置打开第一张图片(例如:1000 / 10 = 移动10像素内打开第一张图,移动到20像素时打开第二张图 ......)
  4. 获取鼠标坐标 / 每一等分的像素 = 当前鼠标在第几个等分的位置
  5. 关闭所有图片,打开当前图片

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体验地址

 

 

 

 

 

 

 

 

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值