js实现旋转木马相册
程序员文章站
2024-03-22 00:02:16
...
鼠标拖拽效果图如下：
旋转效果图如下：
<!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制作旋转相册。
js制作旋转相册比较方便，代码简单，可扩展性强，随便加图片不会影响代码的执行，不用去修改代码。有需要的友友欢迎参考，也欢迎指出不足和错误，一起讨论，共同进步。