圖片3d輪放查看效果(V2.0)：使用鼠標拖動實現圖片的輪放
來源：程序員人生 發布時間：2014-10-12 11:14:59 閱讀次數：2038次
上面的版本為通過左右按鈕實現圖片輪放，這個版本，是通過在窗口拖動鼠標，左右滑動圖片。
關鍵點在于選擇一個合適的值，使鼠標拖動時，所有圖片均可顯示，但是不會滑動過快或離開窗口。
不多說，直接貢獻源碼。
<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>
聲明：所有源碼均為本人原創，歡迎討論，如果直接使用，請最好在源碼中標明出處。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
