图片3d轮放查看效果(V2.0)：使用鼠标拖动实现图片的轮放

Posted 2020-09-16 gavanwanggw

上面的版本号为通过左右button实现图片轮放，这个版本号。是通过在窗体拖动鼠标。左右滑动图片。

关键点在于选择一个合适的值。使鼠标拖动时。全部图片均可显示，可是不会滑动过快或离开窗体。

不多说，直接贡献源代码。

<style>

img {
	position: absolute;
	top:200;
	left:400px;
/*	border: 1px solid #333;*/
	padding: 2px 5px 2px 5px;
	-webkit-transition:ease all 0.7s;
	-webkit-transform-origin: 50% 50% 600px;
/*	background: rgba(0,0,0,.3);*/
	width: 100px;
	height: 100px;
	z-index: -1;
}

.layerhidden {
	position: absolute;
	top:220px;
	width:180px;
	height: 200px;
	background: white;
	vertical-align: middle;
	text-align: center;
	z-index: 1;
}
.layerleft {
	left:0px;
}
.layerright {
	left:850px;
}
</style>
<script>

var imgs;
var leftStart=0;
var showLength=7;
var step = 0;

var mousedown =false;
var xStart = 0;
var yDegs;
window.onmousedown = function(ev) {
	mousedown = true;
	var e = event || window.event;
	xStart=e.clientX;
}
window.onmouseup = function(ev) {
	mousedown = false;
}
window.onmousemove = function(ev) {
	if(mousedown == true ) {
		var e = event || window.event;
		var xtest = 500;
		var yDeg = (e.clientX - xStart) / 1024 * 10;
		//此处50的选择依据可显示全部图片就可以
		if((yDeg >= 0 && yDegs[imgs.length-1]>-50) || (yDeg < 0 && yDegs[0]<50))  {
		
			for(var i=0;i<imgs.length;i++)
			{
				yDegs[i] = yDegs[i] - yDeg;
				imgs[i].style.webkitTransform = "perspective(500px) rotateY("+
				yDegs[i] +
				"deg)";	
			}
		}
	}
}


function init() {
	imgs = document.getElementsByTagName("img");
	yDegs = new Array();
	var deg = Math.floor(imgs.length/2);
	for(var i=0; i< imgs.length;i++)
	{
		imgs[i].style.webkitTransform = "perspective(500px) rotateY("+(deg-i)*10+"deg)";
		yDegs.push((deg-i)*10);
	}
}
</script>
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
<img src="4.png" />
<img src="5.png" />
<img src="6.png" />
<img src="7.png" />
<img src="8.png" />
<img src="9.png" />

<div class="layerhidden layerleft"></div>
<div class="layerhidden layerright"></div>
<script>
init();
</script>

声明：全部源代码均为本人原创，欢迎讨论。假设直接使用，请最好在源代码中标明出处。