3D動態相冊

3D動態相冊

閒來沒事做，就寫一下3D拖拽相冊吧，圖片可自由更換，主要是學習js基礎！先來看看效果吧，當然是靜態的，可以拖拽，廢話少說，上圖：

首先當然是要學習佈局，不知道佈局的話，根本就下不了手！佈局就是以中間的DIV爲準，隨後進行樣式的書寫，具體佈局也說不清楚，希望能看得懂代碼吧！
CSS樣式：

*{margin: 0;padding: 0;}
		body{
			background: #000;
			overflow: hidden;
			user-select:none;
		}
		#perspective{
			perspective:800px;
		}
		#wrap{
			position: relative;
			width: 133px;
			height: 200px;
			margin: 150px auto;
			box-shadow: 0 0 8px #f9f;
			transform-style: preserve-3d;
			transform: rotateX(-15deg) rotateY(0deg);
		}
		#wrap .img{
			width: 133px;
			height: 200px;
			box-shadow: 0 0 8px #f9f;
			position: absolute;
			list-style: none;
		}
		#wrap img{
			position: absolute;
			filter: blur(1px);
			transition: 1s;
			-webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%);
		}
		#wrap img:hover{
			filter: blur(0px);
			transform: scale(1.2);
		}

body部分：

<div id="perspective">
		<div id="wrap">
			<div>
				<img src="images/1.jpg" alt="">
			</div>
			<li class="img">
				<img src="images/1.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/2.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/3.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/4.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/5.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/6.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/7.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/8.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/9.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/10.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/11.jpg" alt="">
			</li>
		</div>
	</div>

JS部分：

//最重要的部分
var oImg = document.getElementsByClassName("img");
		var deg = 360/oImg.length;
		window.onload = function(){
			for(var i = 0; i < oImg.length;i++){
				oImg[i].style.transform = "rotateY("+deg*i+"deg) translateZ(350px)";
				oImg[i].style.transition = "1s "+(oImg.length-i)*0.1+"s";
			}
		}
		var newX,newY,sX,sY,lX,lY,rotateX = -15,rotateY = 0;
		var oWrap = document.getElementById("wrap");
		document.onmousedown = function(event){
			lX = event.clientX;
			lY = event.clientY;
			this.onmousemove = function(event){
				newX = event.clientX;
				newY = event.clientY;
				
				sX = newX - lX;/*求兩次移動距離差*/
				sY = newY - lY;
				
				rotateX -= sY*0.2; 
				rotateY += sX*0.1;
				
				oWrap.style.transform=" rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)";

				//當新的值用完就變成舊的值
				lX = newX;
				lY = newY;
			}
			this.onmouseup = function(event){
				this.onmousemove = null;
				var timer = setInterval(function(){
					sX *= 0.95;
					sY *= 0.95;
					
					rotateX -= sY*0.2; 
					rotateY += sX*0.1;
					
					oWrap.style.transform=" rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)";
					
					if(Math.abs(sX) < 0.1 && Math.abs(sY) < 0.1){
						clearInterval(timer);
					}
				},13);
			}
		}

好了，這樣一個帥氣的3D拖拽相冊就圓滿完工了！！