js如何實現(xiàn)3D旋轉(zhuǎn)相冊

發(fā)布時間：2020-08-03 08:58:51 來源：億速云閱讀：135 作者：小豬欄目：開發(fā)技術(shù)

小編這次要給大家分享的是js如何實現(xiàn)3D旋轉(zhuǎn)相冊，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

效果展示：

使用圖片：

js如何實現(xiàn)3D旋轉(zhuǎn)相冊

剩余自己隨意圖片大小為133*200

代碼展示：

<!DOCTYPE html>
<!--設(shè)置圖片的拖拽事件 不可用-->
<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;
   /*設(shè)置圖片倒影效果*/
   -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;
 // 動態(tài)獲取 圖片的旋轉(zhuǎn)角度
 var mdeg = 360/mlength;
 
 //獲取box 容器
 var mbox = document.querySelector(".box");
 
 
 /*頁面加載后執(zhí)行。。效果*/
  window.onload= function () {
   // 1 圖片旋轉(zhuǎn)動畫
   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)";
   // 添加過渡效果  動畫執(zhí)行多長時間 多久后開始執(zhí)行動畫 此時的效果 從最后一張開始動畫
   //  console.log(mlength-i);
    mimg[i].style.transition = "1s "+(mlength-i)*0.1+"s"; //  0.1 動畫調(diào)節(jié)
    //從第一張開始動畫
    // mimg[i].style.transition = "1s "+i+"s";
   }
 
 
  // 獲取鼠標點的位置 獲取 差值 改變 轉(zhuǎn)換的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;
 
     //獲取旋轉(zhuǎn)的角度
     rotX -= cvalueY; /*因為要向前運動所以是負值*/
     rotY += cvalueX;
 
    // 將角度添加上 img容器
     mbox.style.transform = "rotateX("+rotX*0.1+"deg) rotateY("+rotY*0.1+"deg)"
    // 差值太大（轉(zhuǎn)動太快） 調(diào)節(jié)每次的差值是和上一次差 而不是之前差（初始值的差）
     lastX = newX;
     lastY = newY;
 
    }
   // 鼠標抬起
    this.onmouseup = function () {
     // console.log("抬起");
    // 要停止移動的方法
     this.onmousemove = null;
    }
 
   }
  }
 
</script>
</body>
</html>

看完這篇關(guān)于js如何實現(xiàn)3D旋轉(zhuǎn)相冊的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

向AI問一下細節(jié)

js如何實現(xiàn)3D旋轉(zhuǎn)相冊

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽