javascript照片墙效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript照片墙效果相关的知识，希望对你有一定的参考价值。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>锤子-直播照片墙拖拽技术-网站开发-网页特效</title> <style type="text/css"> *{margin:0;padding:0;} body{background:#000000;/*背景填充*/overflow:hidden;} #perspective{perspective:700px;/*眼球看舞台的远近*/transform-style:preserve-3d;position:relative;transform: rotateX(14deg) translateY(302px);} #wrap{ width:200px;/*宽度*/ height:250px;/*height高度*/ margin:200px 50%;/*auto*/ transform:translateZ(100px); transform-style:preserve-3d;/*置为3D空间*/ position:absolute; left:0; top:100%; } #wrap img{ width:100%; height:100%; position:absolute;/*绝对定位*/ border-radius:5px;/*设置圆角*/ box-shadow:1px 0 10px #fff;/*阴影*/ -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%); } /*#wrap img:nth-child(1){ /*变形 ？ 旋转 rotate 缩放scale 位移translate transform:rotateY(0deg) translateZ(600px); } #wrap img:nth-child(2){ transform:rotateY(33deg) translateZ(600px); } #wrap img:nth-child(3){ transform:rotateY(66deg) translateZ(600px); }*/ </style> </head> <body> <!--- 锤子-照片墙拖拽技术-网站开发-网页特效 如果没有基础来学技术加学习群：539400920要学习下基础教材 如果没有基础来学技术加学习群：539400920要学习下基础教材 1、创建舞台 2、在舞台创建场景 --> <div id="perspective"> <div id="wrap"> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241635554.jpg" alt="梦柯教育" /> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636000.jpg" alt="梦柯教育" /> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636163.jpg" alt="梦柯教育" /> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636272.jpg" alt="梦柯教育" /> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636304.jpg" alt="梦柯教育" /> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636331.jpg" alt="梦柯教育" /> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636374.jpg" alt="梦柯教育" /> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636414.jpg" alt="梦柯教育" /> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636452.jpg" alt="梦柯教育" /> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636484.jpg" alt="梦柯教育" /> <img src="http://www.mengkedu.com/resource/content/2016/11/24/201611241636163.jpg" alt="梦柯教育" /> </div> </div> <script type="text/javascript"> window.onload =function(){ var oWrap = document.getElementById("wrap"); var oImg = oWrap.getElementsByTagName("img"); var oDeg = 360/oImg.length; //算得我们每张图片旋转的度数 var nowX , lastX , nowY , lastY , minusX=0 , minusY = 0; var roX = -10;var roY = 0; var timer = null; //循环 for (var i=0;i<oImg.length ;i++ )//i= 0+1=1 i=1+1=2 { oImg[i].style.transform =‘rotateY(‘+i*oDeg+‘deg) translateZ(700px)‘; //transition 延迟的效果 oImg[i].style.transition = ‘transform 1s ‘+ (oImg.length-1-i)*0.1+‘s‘ }; marTop() function marTop(){ var wH = document.documentElement.clientHeight; oWrap.style.marginTop = wH/2 -200 +"px"; } document.onmousedown = function(ev){ ev = ev || window.event;// //鼠标按下时候、给赋值 lastX = ev.clientX; lastY = ev.clientY; this.onmousemove = function(ev){ ev = ev || window.event; nowX = ev.clientX; //重新记录我们现在按下的坐标X nowY = ev.clientY;//重新记录我们现在按下的坐标Y minusX = nowX - lastX;//移动过后的坐标 移动之前坐标差值X minusY = nowY - lastY;//移动过后的坐标 移动之前坐标差值Y roX += minusX*0.2; roY -= minusY*0.1; oWrap.style.transform = "rotateY("+roX+"deg)"; lastX = nowX ; lastY = nowY; //console.log(nowX) }; this.onmouseup =function(){ this.onmousemove = null; timer = setInterval(function(){ minusX *=0.95; roX += minusX*0.2; oWrap.style.transform = "rotateY("+roX+"deg)"; if (Math.abs(minusX)<0.1) { clearInterval(timer) } },13) } return false; }; }; </script> </body> </html>
以上是关于javascript照片墙效果的主要内容，如果未能解决你的问题，请参考以下文章