开发者社区> nick33> 正文

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

简介: 分享下一个3d显示照片墙的纯JavaScript效果demo,效果很酷炫。可以通过鼠标上下左右拉动,从而把照片墙进行360°展示
+关注继续查看


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

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

酷炫3d照片墙

酷炫3d照片墙

 

酷炫3d照片墙可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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用JavaScript在HaaS EDU K1上实现文字显示
当前HaaS EDU K1已经支持通过JS轻应用方式进行开发调试了,这块开发板带着OLED屏,而底层的AliOS Things已经支持图形库,所以可以通过轻应用的开发方式,尝试进行GUI相应的开发。
178 0
明明没有发生超时错误,为什么SAP WebClient UI会显示超时错误提示?
明明没有发生超时错误,为什么SAP WebClient UI会显示超时错误提示?
29 0
什么是纯函数,JavaScript函数式编程的基础
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 导读:什么是 OAM?2019 年 10 月 17 日,阿里巴巴合伙人、阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 QCon 上海 2019 重磅宣布,阿里云与微软联合推出开放应用模型 Open Application Model (OAM)开源项目。
356 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
20326 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18607 0
如何把SAP CRM产品主数据隐藏的batch ID字段显示出来
如何把SAP CRM产品主数据隐藏的batch ID字段显示出来
18 0
+关注
3
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载