图片3d轮放查看效果(V2.0)：使用鼠标拖动实现图片的轮放
来源：程序员人生 发布时间：2014-10-12 11:14:59 阅读次数：1913次
上面的版本为通过左右按钮实现图片轮放，这个版本，是通过在窗口拖动鼠标，左右滑动图片。
关键点在于选择一个合适的值，使鼠标拖动时，所有图片均可显示，但是不会滑动过快或离开窗口。
不多说，直接贡献源码。
<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>
声明：所有源码均为本人原创，欢迎讨论，如果直接使用，请最好在源码中标明出处。
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
