本文实例为大家分享了js 3 d旋转相册展示的具体代码,供大家参考,具体内容如下
源代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
*{填充:0;保证金:0;字体类型:“比邻星新星”、“proxima-nova”、“Helvetica Neue Helvetica, Arial,无衬线!重要;}
html体{溢出:隐藏;}
身体{背景:# ccc;}
.box{宽度:140 px;身高:200 px;-webkit-transform-style: preserve-3d;-webkit-transform:角度(800 px) rotateY(0度)rotateX(0度);位置:相对;保证金:400 px汽车;}
.box跨度{宽度:140 px;身高:200 px;位置:绝对的;背景:deepskyblue;字体大小:20 px;
text-align:中心;行高:200 px;颜色:白色,}
& lt;/style>
& lt; script>
函数r2n (n) {
返回n * Math.PI/180
}
window=function () {
var oBox=document.getElementsByClassName(“盒子”)[0];
var=document.getElementsByTagName(“跨度”);
我(var=0; i< aS.length;我+ +){
[我].style。WebkitTransition=1年代所有缓解+ (aS.length-i) * 1 +“s”;
[我].style.WebkitTransform=' rotateY(“我+ * 360/aS.length +”度)”+“translateZ (500 px)”
}
var pos=[];
var x=0;
var y=0;
var计时器=零;
var timer2=零;
document.onmousedown=function (ev) {
计时器=setInterval(函数(){
pos [0]=pos [2];
pos [1]=pos [3];
pos [2]=x;
pos [3]=y;
},30);
var disx=ev.pageX-x;
var disy=ev.pageY-y;
document.onmousemove=function (ev) {
x=ev.pageX-disx;
y=ev.pageY-disy;
oBox.style。WebkitTransform=笆咏?800 px)”+“rotateY (+ x/3 +的度)”+“rotateX (+ - y/3 +的度)”;
}；
document.onmouseup=function () {
clearInterval(计时器);
var speedx=pos [2] pos [0];
var快速=pos [3] pos [1];
timer2=setInterval(函数(){
x +=speedx;
y +=快速;
oBox.style。WebkitTransform=笆咏?800 px)”+“rotateY (+ x/3 +的度)”+“rotateX (+ - y/3 +的度)”;
speedx *=0.94;
快速*=0.94;
如果(Math.abs (speedx) & lt; 1) speedx=0;
如果(Math.abs(快速)& lt; 1)快速=0;
如果(speedx==0,和快速==0){
clearInterval (timer2)
}
},30);
document.onmousemove=零;
document.onmouseup=零;
}
}；
返回假
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="盒子"比;
& lt; span> 1 & lt;/span>
& lt; span> 2 & lt;/span>
& lt; span> 3 & lt;/span>
& lt; span> 4 & lt;/span>
& lt; span> 5 & lt;/span>
& lt; span> 6 & lt;/span>
& lt; span> 7 & lt;/span>
& lt; span> 8 & lt;/span>
& lt; span> 9 & lt;/span>
& lt; span> 10 & lt;/span>
& lt; span> 11 & lt;/span>
& lt; span> 12 & lt;/span>
& lt;/div>
& lt;/body>
& lt;/html>
效果图:
JavaScript制作3 d旋转相册
