web前端案例-开发3D拖拽照片墙

来源：互联网发布：免费云mysql数据库编辑：程序博客网时间：2024/05/19 12:17

javascript加CSS3做不一样的3D拖拽照片墙

这代码一共136行，是用css3和javascript写出来的，现在网络上的相册，照片基本是是平铺，要是照片多的话看起来是很累的，当然这是我个人的观点，所以这次就做了一个3D相册拖拽的效果，看起来美观，观看也不累。

知识点：CSS33D效果,CSS3过度，原生JavaScript拖拽模块开发，动态style样式，力学模拟算法，event对象详解，js逻辑思维与编程思想。

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style> *{margin:0;padding:0}  body{background:#222;overflow:hidden;user-select:none;  /*禁止选中*/  }.perspective{perspective:800px;  /*3d景深*/}.wrap{transform-style:preserve-3d;width:120px;height:180px;margin:100px auto;position:relative;transform:rotateX(-10deg) rotateY(0deg);}.wrap img{display:block;position:absolute;width:100%;height:100%;transform: rotateY(0deg) translateZ(0px);padding:10px;background:transparent;box-shadow: 0 0 4px #fff; /*水平位移 垂直位移 扩散程度 颜色*/border-radius:5px;        /*圆角*/-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%); /*倒影 倒影模式 直径*/}.wrap p{width:1200px;height:1200px;background:-webkit-radial-gradient(center center ,600px 600px, rgba(122,122,122,0.5),rgba(0,0,0,0));position:absolute;border-radius:50%;left:50%;    top:100%;margin-left:-600px;margin-top:-600px;transform:rotateX(90deg); /*沿着x轴方向摁倒*/}  </style>  <title>3d场景照片墙</title>    </head><body><div class='perspective'><div class='wrap'><img src='images/1.jpg' width='133' height='200' alt='#'><img src='images/2.jpg' width='133' height='200' alt='#'><img src='images/3.jpg' width='133' height='200' alt='#'><img src='images/4.jpg' width='133' height='200' alt='#'><img src='images/5.jpg' width='133' height='200' alt='#'><img src='images/6.jpg' width='133' height='200' alt='#'><img src='images/7.jpg' width='133' height='200' alt='#'><img src='images/8.jpg' width='133' height='200' alt='#'><img src='images/9.jpg' width='133' height='200' alt='#'><img src='images/10.jpg' width='133' height='200' alt='#'><img src='images/11.jpg' width='133' height='200' alt='#'><p></p></div></div><script>/*谁 触发了什么事件 谁做了什么*/window.onload=function(){  /*页面加载完成*//*最新的原生获取元素方法querySelectorAll*/var oImg=document.querySelectorAll('img'); var oWrap=document.querySelector('.wrap');var lastX,lastY,nowX,nowY,minusX,minusY,roY=0,roX=-10;var timer=null;/*计算每一个图片的角度 总角度(360) / 数量(11) = 单位角度*/var length=oImg.length;  /*获取img的数量 统称为长度*/var Deg=360/length;      /*单位角度*/for(var i=0;i<length;i++){   oImg[i].style.transform='rotateY('+ i*Deg +'deg) translateZ(350px)';   oImg[i].style.transition='transform 1s '+(length-1-i)*0.2+'s'}mTop();window.onresize=mTop;function mTop(){ /*获取浏览器窗口可视高度*/var wH=document.documentElement.clientHeight||document.body.clientHeight;oWrap.style.marginTop=(wH/2)-oWrap.offsetHeight+'px';}/*拖拽drag 按下 onmousedown 移动 onmousemove 抬起 onmouseup */document.onmousedown=function(event){ /*按下鼠标开始准备拖拽*/event=event||window.event;/*处理兼容性*/lastX=event.clientX;/*鼠标拖拽开始时的x坐标*/lastY=event.clientY;/*鼠标拖拽开始时的Y坐标*/clearInterval(timer);document.onmousemove=function(event){event=event||window.event;nowX=event.clientX;             /*鼠标移动时的x坐标*/nowY=event.clientY;/*鼠标移动时的y坐标*/minusX=nowX-lastX;              /*获取鼠标移动距离*/minusY=nowY-lastY;/*获取鼠标移动距离*/roY+=minusX*0.2;/*通过移动量计算旋转角度*/roX-=minusY*0.1;/*通过移动量计算旋转角度*/oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)' lastX=nowX;/*更新初始位置保证 lastX 跟得上鼠标*/lastY=nowY;/*更新初始位置保证 lastY  */}document.onmouseup=function(){document.onmousemove=null;timer=setInterval(function(){/*给一个摩擦系数,每一次定时器触发都慢一点点*/minusX*=0.9;                     minusY*=0.9;roY+=minusX*0.2;/*通过移动量计算旋转角度*/roX-=minusY*0.1;/*通过移动量计算旋转角度*/oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)';if(Math.abs(minusX)<0.1&&Math.abs(minusY)<0.1){/*当移动向量过小的时候终止定时器停止惯性*/clearInterval(timer);    }},13);}return false;}}</script> </body></html>

web前端学习群：575308719，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。

关注公众号→‘学习web前端’跟大佬一起学前端！

阅读全文

0 0