• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JavaScript web前端中文站 2年前 (2018-03-30) 2611次浏览 已收录 27个评论

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

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

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

酷炫 3d 照片墙

 

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

酷炫 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> 

在线演示
具体图片3d 立体照片墙效果 js 代码,html 和 css 代码 demo、素材在下面链接:

百度网盘下载 ? ? ?密码:pxlp

==========================


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:非常酷炫漂亮的 3d 立体照片展示墙 纯 JavaScript 显示
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(27)个小伙伴在吐槽
  1. 厉害
    哈哈2019-08-10 16:36 回复
  2. 可以
    布知鸟2019-07-29 22:38 回复
  3. 不多,我还想看看源码,多学习学习。
    弟弟撒2019-07-18 09:49 回复
  4. 你好
    6662019-07-06 14:13 回复
  5. 6666
    1112019-06-27 19:30 回复
  6. 很棒
    songosng2019-06-27 17:42 回复
  7. 学习
    1232019-06-19 22:37 回复
  8. ..
    看一看2019-06-18 20:32 回复
  9. 看看
    Da.yyy2019-06-14 19:03 回复
  10. 学习学习
    ZGY0072019-05-19 22:57 回复
  11. :eek:
    gn2019-05-18 15:45 回复
  12. 前来学习
    stevendavid2019-05-14 14:33 回复
  13. 666666
    uuuu2019-05-04 13:19 回复
  14. 所以我回复了
    tree2019-04-27 21:17 回复
  15. :grin:
    骨头2019-04-24 15:32 回复
  16. 66
    www2019-04-01 15:55 回复
  17. 帅啊
    6662019-03-25 21:49 回复
  18. :idea: :idea: :idea: :idea: :idea:
    sdfs2019-03-13 21:06 回复
  19. :grin: 学习下
    牛牛的无奈2019-03-13 15:32 回复
  20. 看一下
    but this love is so far away2019-03-09 08:09 回复
  21. 看一下
    哈哈2019-02-14 22:11 回复
  22. 看一下
    102019-01-26 10:07 回复
  23. 看一下
    墨言2019-01-10 10:09 回复
  24. :roll:
    的撒的撒2018-11-19 21:25 回复
  25. 想知道效果
    1232018-08-14 14:09 回复
  26. 23
    philous2018-07-06 10:20 回复