溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是js如何實現3D旋轉相冊，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
效果展示：
使用圖片：
剩余自己隨意 圖片大小為133*200
代碼展示：
<!DOCTYPE html>
<!--設置圖片的拖拽事件 不可用-->
<html lang="en" ondragstart="return false">
<head>
<meta charset="UTF-8">
<title>3D效果</title>
<style>
* {
background-color: #000;
}
.container {
border: 1px solid yellow;
perspective: 800px;
overflow: hidden;
}
.box {
position: relative;
border: 1px solid #f00;
width: 133px;
height: 200px;
margin: 300px auto;
transform-style: preserve-3d;
transform:rotateX(-20deg) rotateY(0deg);
}
img {
position: absolute;
/*設置圖片倒影效果*/
-webkit-box-reflect:below 5px -webkit-gradient(linear,left top, left bottom,from( transparent),color-stop(40%,transparent),to(rgba(250,250,250,0.4)));
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
<img src="img/9.jpg" alt="">
<img src="img/10.jpg" alt="">
<img src="img/11.jpg" alt="">
</div>
</div>
<script>
// a 獲取所有 img 元素
var mimg = document.querySelectorAll("img");
var mlength = mimg.length;
// 動態獲取 圖片的旋轉角度
var mdeg = 360/mlength;
//獲取box 容器
var mbox = document.querySelector(".box");
/*頁面加載后執行。。效果*/
window.onload= function () {
// 1 圖片旋轉動畫
for(var i = 0;i<mlength;i++){
// console.log(mimg);
//每張圖片 1 60 2 120 3 180 4 240 60為圖片的平分角
mimg[i].style.transform = "rotateY("+(mdeg*i)+"deg) translateZ(350px)";
// 添加過渡效果 動畫執行多長時間 多久后開始執行動畫 此時的效果 從最后一張開始動畫
// console.log(mlength-i);
mimg[i].style.transition = "1s "+(mlength-i)*0.1+"s"; // 0.1 動畫調節
//從第一張開始動畫
// mimg[i].style.transition = "1s "+i+"s";
}
// 獲取鼠標點的位置 獲取 差值 改變 轉換的rotate： x y
var newX,newY,lastX,lastY,cvalueX,cvalueY, rotX=-20,rotY=0;
// 鼠標滑動后改變效果 (使用鼠標 按下 替換點擊事件)
document.onmousedown = function (e) {
// 鼠標點擊
// console.log("點擊");
lastX = e.clientX;
lastY = e.clientY;
// 鼠標移動
this.onmousemove = function (e) {
// console.log("移動");
newX = e.clientX;
newY = e.clientY;
console.log(newX +" "+newY);
//獲取移動的差值
cvalueX = newX-lastX;
cvalueY = newY-lastY;
//獲取旋轉的角度
rotX -= cvalueY; /*因為要向前運動所以是負值*/
rotY += cvalueX;
// 將角度添加上 img容器
mbox.style.transform = "rotateX("+rotX*0.1+"deg) rotateY("+rotY*0.1+"deg)"
// 差值太大（轉動太快） 調節每次的差值是和上一次差 而不是之前差（初始值的差）
lastX = newX;
lastY = newY;
}
// 鼠標抬起
this.onmouseup = function () {
// console.log("抬起");
// 要停止移動的方法
this.onmousemove = null;
}
}
}
</script>
</body>
</html>看完這篇關于js如何實現3D旋轉相冊的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
