查看: 1072|回复: 0

[JavaScript/JQuery] javascript加CSS3做不一样的3D拖拽照片墙

发表于 2018-4-7 08:00:02

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

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

html代码

  1. <div class='perspective'>
  2. <div class='wrap'>
  3. <img src='images/1.jpg' width='133' height='200' alt='#'>
  4. <img src='images/2.jpg' width='133' height='200' alt='#'>
  5. <img src='images/3.jpg' width='133' height='200' alt='#'>
  6. <img src='images/4.jpg' width='133' height='200' alt='#'>
  7. <img src='images/5.jpg' width='133' height='200' alt='#'>
  8. <img src='images/6.jpg' width='133' height='200' alt='#'>
  9. <img src='images/7.jpg' width='133' height='200' alt='#'>
  10. <img src='images/8.jpg' width='133' height='200' alt='#'>
  11. <img src='images/9.jpg' width='133' height='200' alt='#'>
  12. <img src='images/10.jpg' width='133' height='200' alt='#'>
  13. <img src='images/11.jpg' width='133' height='200' alt='#'>
  14. <p></p>
  15. </div>
  16. </div>
复制代码

css代码

  1. <style>
  2. *{margin:0;padding:0}
  3. body{
  4. background:#222;
  5. overflow:hidden;
  6. user-select:none; /*禁止选中*/
  7. }
  8. .perspective{
  9. perspective:800px; /*3d景深*/
  10. }
  11. .wrap{
  12. transform-style:preserve-3d;
  13. width:120px;
  14. height:180px;
  15. margin:100px auto;
  16. position:relative;
  17. transform:rotateX(-10deg) rotateY(0deg);
  18. }
  19. .wrap img{
  20. display:block;
  21. position:absolute;
  22. width:100%;
  23. height:100%;
  24. transform: rotateY(0deg) translateZ(0px);
  25. padding:10px;
  26. background:transparent;
  27. box-shadow: 0 0 4px #fff; /*水平位移 垂直位移 扩散程度 颜色*/
  28. border-radius:5px; /*圆角*/
  29. -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%); /*倒影 倒影模式 直径*/
  30. }
  31. .wrap p{
  32. width:1200px;
  33. height:1200px;
  34. background:-webkit-radial-gradient(center center ,600px 600px, rgba(122,122,122,0.5),rgba(0,0,0,0));
  35. position:absolute;
  36. border-radius:50%;
  37. left:50%;
  38. top:100%;
  39. margin-left:-600px;
  40. margin-top:-600px;
  41. transform:rotateX(90deg); /*沿着x轴方向摁倒*/
  42. }
  43. </style>
复制代码

javascript代码:

  1. <script>
  2. /*谁 触发了什么事件 谁做了什么*/
  3. window.onload=function(){ /*页面加载完成*/
  4. /*最新的原生获取元素方法querySelectorAll*/
  5. var oImg=document.querySelectorAll('img');
  6. var oWrap=document.querySelector('.wrap');
  7. var lastX,lastY,nowX,nowY,minusX,minusY,roY=0,roX=-10;
  8. var timer=null;
  9. /*计算每一个图片的角度 总角度(360) / 数量(11) = 单位角度*/
  10. var length=oImg.length; /*获取img的数量 统称为长度*/
  11. var Deg=360/length; /*单位角度*/
  12. for(var i=0;i<length;i++){
  13. oImg[i].style.transform='rotateY('+ i*Deg +'deg) translateZ(350px)';
  14. oImg[i].style.transition='transform 1s '+(length-1-i)*0.2+'s'
  15. }
  16. mTop();
  17. window.onresize=mTop;
  18. function mTop(){
  19. /*获取浏览器窗口可视高度*/
  20. var wH=document.documentElement.clientHeight||document.body.clientHeight;
  21. oWrap.style.marginTop=(wH/2)-oWrap.offsetHeight+'px';
  22. }
  23. /*拖拽drag 按下 onmousedown 移动 onmousemove 抬起 onmouseup */
  24. document.onmousedown=function(event){ /*按下鼠标开始准备拖拽*/
  25. event=event||window.event; /*处理兼容性*/
  26. lastX=event.clientX; /*鼠标拖拽开始时的x坐标*/
  27. lastY=event.clientY; /*鼠标拖拽开始时的Y坐标*/
  28. clearInterval(timer);
  29. document.onmousemove=function(event){
  30. event=event||window.event;
  31. nowX=event.clientX; /*鼠标移动时的x坐标*/
  32. nowY=event.clientY; /*鼠标移动时的y坐标*/
  33. minusX=nowX-lastX; /*获取鼠标移动距离*/
  34. minusY=nowY-lastY; /*获取鼠标移动距离*/
  35. roY+=minusX*0.2; /*通过移动量计算旋转角度*/
  36. roX-=minusY*0.1; /*通过移动量计算旋转角度*/
  37. oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)'
  38. lastX=nowX; /*更新初始位置保证 lastX 跟得上鼠标*/
  39. lastY=nowY; /*更新初始位置保证 lastY */
  40. }
  41. document.onmouseup=function(){
  42. document.onmousemove=null;
  43. timer=setInterval(function(){
  44. /*给一个摩擦系数,每一次定时器触发都慢一点点*/
  45. minusX*=0.9;
  46. minusY*=0.9;
  47. roY+=minusX*0.2; /*通过移动量计算旋转角度*/
  48. roX-=minusY*0.1; /*通过移动量计算旋转角度*/
  49. oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)';
  50. if(Math.abs(minusX)<0.1&&Math.abs(minusY)<0.1){
  51. /*当移动向量过小的时候终止定时器停止惯性*/
  52. clearInterval(timer);
  53. }
  54. },13);
  55. }
  56. return false;
  57. }
  58. }
  59. </script>
复制代码

有兴趣想学习web前端的可以来web前端qun“189394454”可以免费获取2018最新web前端学习资料。



回复

使用道具 举报