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拖拽相册就圆满完工了!!