最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js实现3D图片环展示效果
时间:2017-06-13 编辑:简简单单 来源:一聚教程网
可对整体进行拖拽
效果图:
代码如下:
代码如下 | 复制代码 |
*{padding:0;margin:0; font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif !important;} html body{overflow: hidden;} body{background:#ccc;} .box{width:140px; height:200px; -webkit-transform-style:preserve-3d; -webkit-transform: perspective(800px) rotateY(0deg) rotateX(0deg); position:relative; margin:400px auto;} .box span{width:140px; height:200px; position: absolute; background:deepskyblue; font-size:20px; text-align: center; line-height:200px; color:white;}
function r2n(n){ return n*Math.PI/180 } window.onload=function(){ var oBox=document.getElementsByClassName('box')[0]; var aS=document.getElementsByTagName('span'); for(var i=0;i aS[i].style.WebkitTransition='1s all ease '+(aS.length-i)*.1+'s'; aS[i].style.WebkitTransform='rotateY('+i*360/aS.length+'deg)'+' translateZ(500px) ' } var pos=[]; varx=0; vary=0; vartimer=null; vartimer2=null; document.onmousedown=function(ev){ timer=setInterval(function(){ pos[0]=pos[2]; pos[1]=pos[3]; pos[2]=x; pos[3]=y; },30); vardisx=ev.pageX-x; vardisy=ev.pageY-y; document.onmousemove=function(ev){ x=ev.pageX-disx; y=ev.pageY-disy; oBox.style.WebkitTransform=' perspective(800px)'+' rotateY('+x/3+'deg)'+'rotateX('+-y/3+'deg)'; }; document.onmouseup=function(){ clearInterval(timer); varspeedx=pos[2]-pos[0]; varspeedy=pos[3]-pos[1]; timer2=setInterval(function(){ x+=speedx; y+=speedy; oBox.style.WebkitTransform=' perspective(800px)'+' rotateY('+x/3+'deg)'+'rotateX('+-y/3+'deg)'; speedx*=0.94; speedy*=0.94; if(Math.abs(speedx)<1)speedx=0; if(Math.abs(speedy)<1)speedy=0; if(speedx==0&&speedy==0){ clearInterval(timer2) } },30); document.onmousemove=null; document.onmouseup=null; } }; return false } 1 2 3 4 5 6 7 8 9 10 11 12 |