js实现3D图片环展示效果
程序员文章站
2022-05-12 19:57:37
可对整体进行拖拽
效果图:
代码如下:
可对整体进行拖拽
效果图:
代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> *{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;} </style> <script> 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.length;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=[]; var x=0; var y=0; var timer=null; var timer2=null; document.onmousedown=function(ev){ timer=setinterval(function(){ 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=' perspective(800px)'+' rotatey('+x/3+'deg)'+'rotatex('+-y/3+'deg)'; }; document.onmouseup=function(){ clearinterval(timer); var speedx=pos[2]-pos[0]; var speedy=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 } </script> </head> <body> <div class="box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> <span>11</span> <span>12</span> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
下一篇: 拜观音菩萨默念什么?拜观音菩萨注意事项