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

程序员静静技术 2022年11月7日

0 收藏 452 点赞 927 浏览 1638 个字

上面的版本号为通过左右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>