js实现旋转木马相册 太过爱你忘了你带给我的痛 2023-07-20 13:45 28阅读 0赞 **鼠标拖拽效果图如下:** ![在这里插入图片描述][20200402084625113.gif] **旋转效果图如下:** ![在这里插入图片描述][20200402084046677.gif] <!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=""> <title>炫酷旋转</title> <style> * { margin: 0px; padding: 0; } .perspective { perspective: 1000px; perspective-origin: top; } #wrap { position: relative; width: 200px; height: 200px; margin: 250px auto; transform-style: preserve-3d; transform:rotateX(0deg) rotateY(0deg); /* 要想实现旋转只要把下面这段代码去掉注释,实现拖拽加上注释就行 */ /* animation: rot 5s linear infinite; */ } #wrap img { position: absolute; } @keyframes rot { 0% { transform: rotateY(0deg) } 100% { transform: rotateY(180deg) } } </style> </head> <body> <div class='perspective'> <div id='wrap'> <img src='./muma/1.jpg' alt='' /> <img src='./muma/2.jpg' alt='' /> <img src='./muma/3.jpg' alt='' /> <img src='./muma/4.jpg' alt='' /> <img src='./muma/1.jpg' alt='' /> <img src='./muma/2.jpg' alt='' /> <img src='./muma/3.jpg' alt='' /> <img src='./muma/4.jpg' alt='' /> <img src='./muma/1.jpg' alt='' /> <img src='./muma/2.jpg' alt='' /> <img src='./muma/3.jpg' alt='' /> <img src='./muma/4.jpg' alt='' /> </div> </div> </body> <script> var oImg = document.getElementsByTagName('img');/* 得到所有图片 */ var oWrap = document.getElementById('wrap'); var length = oImg.length; // 列表长度 var deg = 360 / length; // 每个图片之间间隔的角度 //页面加载完后再执行的代码 window.onload = function () { //遍历到所有的图片ele单个元素 //.call是一个prototype,JavaScript函数内置的。.call使用它的第一个参数替换掉上面说的这个this,也就是你要传人的数组,其它的参数就跟forEach方法的参数一样了 //第一个参数就是传入的图片数组,函数参数是标签对象,索引,和数组本身。 Array.prototype.forEach.call(oImg, function (ele, index, self) { ele.style.transform = `rotateY(${ deg * index}deg) translateZ(400px)`; ele.style.transition = `1s ${ (length - index) * .1}s`;//单个图片出现的时间,第2个属性延时,第一张延时最长 }); } // 拖拽时记录位置的变量 var newX, newY, lastX, lastY, minusX, minusX, rotX = -20, rotY = 0; //鼠标按下事件 document.onmousedown = function (e) { //记录第一次的值 lastX = e.clientX; lastY = e.clientY; //鼠标移动事件 this.onmousemove = function (e) { newX = e.clientX; newY = e.clientY; minusX = newX - lastX; // 新拖动的位置距离上一次的位置的大小 minusY = newY - lastY; rotX -= minusY; rotY += minusX; oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)"; lastX = newX; // 更新位置 lastY = newY; } //鼠标松开事件,这是为了让鼠标松开时不在触发移动事件 this.onmouseup = function (e) { this.onmousemove = null; } } </script> </html> 代码的详细讲解和思路可以参考[CSS制作旋转相册][CSS]。 js制作旋转相册比较方便,代码简单,可扩展性强,随便加图片不会影响代码的执行,不用去修改代码。有需要的友友欢迎参考,也欢迎指出不足和错误,一起讨论,共同进步。 [20200402084625113.gif]: /images/20230528/60a893c50d084b07ba9ebce4a6ba8397.png [20200402084046677.gif]: /images/20230528/7b5550eff11a459c844b92e001076e92.png [CSS]: https://blog.csdn.net/weixin_45000814/article/details/104442253
还没有评论,来说两句吧...