非常酷炫漂亮的3D立体照片展示墙 纯JAVASCRIPT显示

今天主要给大家分享下一个3d显示照片墙的纯JavaScript效果demo，效果很酷炫。可以通过鼠标上下左右拉动，从而把照片墙进行360°展示。

鼠标停止后，在操作过程中，会发现，照片会以某角度轴，继续滑动一段距离。核心JavaScript代码见如下，下方链接有百度网盘分享链接，大家有兴趣可以down下来玩玩。先上图：

酷炫3d照片墙

酷炫3d照片墙可3d移动展示

 <script type="text/javascript"> /*rotateX/rotateY/rotateZ可以帮助理解三维坐标，*/web前端中文站 /*则translateZ则可以帮你理解透视位置(translateZ的功能就是让元素在自己的眼前或近或远)*/ window.onload=function(){ var oUl=document.getElementById("ul1"); var aImg=document.getElementsByTagName("img"); var aLi=oUl.getElementsByTagName("li"); var deg=360/aLi.length; for(var i=0;i<aLi.length;i++){ //每张图片缩放的时间 aLi[i].style.transition='all 0.5s '+((aLi.length-1-i)*0.2)+'s'; aLi[i].style.WebkitTransform='rotateY('+deg*i+'deg) translateZ(450px)'; aLi[i].style.MozTransform='rotateY('+deg*i+'deg) translateZ(450px)'; } //禁止拖动照片 www.lisa33xiaoq.net document.onselectstart=function(){ return false; } for(var i=0;i<aImg.length;i++){ aImg[i].setAttribute("ondragstart", "return false") } var roY=0; var roX=-10; var xN=0; var yN=0; var timer=null; document.onmousedown=function(ev){ var ev=ev||event; var disX_=ev.clientX; var disY_=ev.clientY; document.onmousemove=function(ev){ var ev=ev||event; var disX=ev.clientX; var disY=ev.clientY; xN=disX-disX_; yN=disY-disY_; roY+=xN*0.1; roX-=yN*0.1; oUl.style.WebkitTransform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'; oUl.style.MozTransform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'; disX_=ev.clientX; disY_=ev.clientY; } //实现鼠标按着滑动后，松开鼠标，画面继续跟进 差值 进行滑动 document.onmouseup=function(){ document.onmousemove=null; timer=setInterval(function(){ xN=xN*0.99; yN=yN*0.99; if(Math.abs(xN)<=0.5 && Math.abs(yN)<=0.5){ //决定滑动的周期，如果乘以 1.0，则一直滑动下去不停止 clearInterval(timer); } roY+=xN*0.5; roX-=yN*0.5; oUl.style.WebkitTransform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'; //360 浏览器适用这个 //oUl.style.MozTransform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'; },30) } } //取消鼠标右键 document.oncontextmenu=function(){ return false; } document.onkeydown=function(ev){ var ev=ev||event; if(ev.keyCode==123){ return false } } } </script> 

在线演示

原文链接：https://www.lisa33xiaoq.net/1190.html