js實現3D旋轉相簿

阿新 • • 發佈：2020-08-03

本文例項為大家分享了js實現3D旋轉相簿的具體程式碼，供大家參考，具體內容如下

效果展示：

js實現3D旋轉相簿

使用圖片：

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,0.4)));
    }
 
  </style>
</head>
<body>
<div class="container">
  <div class="box">
    <img src="img/1.jpg" alt="js實現3D旋轉相簿">
    <img src="img/2.jpg" alt="js實現3D旋轉相簿">
    <img src="img/3.jpg" alt="js實現3D旋轉相簿">
    <img src="img/4.jpg" alt="js實現3D旋轉相簿">
    <img src="img/5.jpg" alt="js實現3D旋轉相簿">
    <img src="img/6.jpg" alt="js實現3D旋轉相簿">
    <img src="img/7.jpg" alt="js實現3D旋轉相簿">
    <img src="img/8.jpg" alt="js實現3D旋轉相簿">
    <img src="img/9.jpg" alt="js實現3D旋轉相簿">
    <img src="img/10.jpg" alt="js實現3D旋轉相簿">
    <img src="img/11.jpg" alt="js實現3D旋轉相簿">
  </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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。