非常酷炫漂亮的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.netdocument.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

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

酷炫十足！3D立体元素平面版式设计作品
立体构成是由二维平面形象进入三维立体空间的构成表现,两者既有联系又有区别.联系的是:它们都是一种艺术训练,引导了解造型观念,训练抽象构成能力,培养审美观,接受严格的纪律训练:区别的是:立体构成是三维度 ...
设计灵感|惊艳！酷炫十足！3D平面版式设计案例
设计帮助我们了解这个世界,趋势让我们保持设计的敏锐度.如果你是设计师,或者从事设计相关行业,就需要掌握最新的设计趋势,了解风格如何变化和发展,能让你的设计保持新鲜感,并且时刻与客户产生共鸣. 3D效果 ...
13种酷炫的html5 3D图片切换代码
jQuery 3D图片叠加css3翻转图片切换特效 html5图片3d切换幻灯片轮播特效代码 jquery 3d响应式幻灯片带左右按钮的图片滑动切换效果 jquery.slicebox酷炫的html5 ...
linux酷炫桌面环境,Linux系统好酷炫漂亮(图)
Linux系统好酷炫漂亮(图),Linux 本身就非常灵活.在很大程度上您可以定制桌面的外观和行为.没有接触过Linux的朋友可能有这样的观 Linux 本身就非常灵活.在很大程度上您可以定制桌面的外 ...
HTML5七夕情人节表白网页制作【飘落蒲公英动画超酷炫的HTML5页面】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的. 故事要从Right Hemisphere说起,这是一家专业的企业级2D/3D模型浏览及转换的软件供应 ...
百度热力图颜色说明_不止于2D，酷炫的地图3D热力图实现解析
本期小编为大家带来百度地图可视化大屏解决方案技术解析系列文章之一,为您呈现3D热力图渲染技术. 首先先看下2d热力图和3d热力图生成的效果图区别业务及技术痛点很多行业数据使用3D热力图表达更为直观 ...
前端效果积累｜酷炫、实用3D地球路径飞行效果实现
10款非常酷炫的网站首页焦点图兼容ie浏览器
1.jquery skitter幻灯片插件图片类似百叶窗切换效果查看演示>> 2.jquery ui幻灯片插件带进度条自动轮播滤镜百叶窗图片切换查看演示>> 3.jQuer ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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