溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關純js怎樣實現3d相冊，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
純JavaScript實現 旋轉木馬/3d相冊特效(鼠標拖拽旋轉)
先來看看效果圖
說一下實現的思路
旋轉木馬是通過依靠擁有景深(perspective)屬性的盒子(此處盒子id起為:perspective)產生向網頁內部的延伸感，并讓裝有圖片沿z軸平移后(translateZ(Xpx))的盒子(此處起名為wrap)在擁有景深屬性的盒子(perspective)內憑借transform屬性產生的3d效果沿盒子(wrap)y軸旋轉轉動來實現的。
3d實現過程
首先要知道在js中transform中的xyz軸的含義
首先設置一個div，為其加上perspective的屬性(撐開空間)，方便后邊觀察效果
/* 場景景深 */
#perspective{perspective: 700px;
/*此屬性是實現旋轉木馬的要點，能產生空間上的距離/延伸感。在此盒子中放置圖片的盒子便可以實現向網頁內部延伸的感覺*/}2. 其次，設置裝有圖片盒子的容器wrap,使其居中顯示，并加上position:relative的屬性，讓其內的圖片定位。加上transform屬性，在之后會用到。
#wrap{position: relative;width: 200px;height: 200px;margin: 150px auto;border: 1px solid black;transform-style: preserve-3d; /*實現3d效果的關鍵步驟，與boxshadow配合使用可以忽略層級問題，之后會說到*/transform: rotateX(0deg) rotateY(0deg) ;//為盒子的3d效果和旋轉效果做準備。}加入圖片，設置樣式，使用position:absolute；使其重疊。以數組的形式獲取，并根據其數組長度length來計算圖片的旋轉角度。
#wrap img{position: absolute;width: 200px;}<script>var oImg = document.getElementsByTagName('img')；var Deg = 360/oImg.length; oWrap = document.getElementById('wrap'); /*順便拿一下容器*/</script>遍歷數組，使其沿y軸旋轉Deg度。此處使用了原型，使用foreach方法遍歷了數組，讓其內每個圖片都執行了function(el,index)。使用index下標區分開了數組內每個圖片需要旋轉的不同度數（第一張0°（Deg * 0） 第二張Deg度 （Deg * 1） 第三張（Deg * 2）度…）
/*oImg表示數組對象，
function(el,index)表示數組內每個對象要執行的函數，
index為其下標。
*/Array.prototype.forEach.call(oImg,function(el,index){
el.style.transform = "rotateY("+Deg*index+"deg)";
})Array.prototype 屬性表示 Array 構造函數的原型，并允許我們向所有Array對象添加新的屬性和方法。
forEach() 方法對數組的每個元素執行一次提供的函數。
此處值得注意的是，xxx.xx.transform = “rotateY(”+Deg*index+“deg)”;
需要加上deg單位，括號要被雙引號包著，也就是說，出來后的結果是transform :rotateY(度數deg);度數表示數字，要避免被轉為字符串。
做完上一步操作后，讓盒子其內圖片沿Z軸平移translateZ(350px)屬性便能初步看到3d效果，但此時會發現容器內圖片數組出現了層級問題（Zindex）導致了理應在后面的圖片能被顯示出來。
這里有一種方法能忽略掉這個影響，避開層級問題：
/*加上沿z擴散*/<script>Array.prototype.forEach.call(oImg,function(el,index){el.style.transform = "rotateY("+Deg*index+"deg)translateZ(350px)"; //沿z軸擴散350px})</script>-------執行完畢后--------加上屬性觀察效果---------#wrap{width: 200px;height: 200px;position: relative;margin:150px auto;transform-style: preserve-3d; /*實現3d效果的關鍵步驟，與boxshadow配合使用可以忽略層級問題*/}#wrap img{position: absolute;width: 200px;box-shadow: 0px 0px 1px #000000; /* 用box-shadow配合transform-style: preserve-3d;可以忽略層級問題 */}這時候為裝有圖片的盒子加上transform:rotateX(-15deg);便能看到較為完整的3d效果了，此時實現盒子繞y軸轉動便可實現旋轉木馬的效果。
實現運動過程
單純使盒子轉動就可以實現旋轉木馬，可以使用setinterval來不斷使其旋轉。
如果想使用鼠標拖動實現旋轉木馬，則需要再加一些代碼，使裝有盒子的容器(wrap)能夠根據鼠標坐標變化繞容器(wrap)自身y軸轉動。
var nowX ,nowY,//當前鼠標坐標lastX ,lastY ,//上一次鼠標坐標minusX,minusY ,//距離差roX = -10,roY = 0;//總旋轉度數window.onmousedown = function(ev){var ev = ev;//獲得事件源//鼠標移動后當前坐標會變為舊坐標，此處先保存，在算鼠標位移距離差的時候會用到。lastX = ev.clientX;lastY = ev.clientY;this.onmousemove = function(ev){var ev = ev;//獲得事件源nowX = ev.clientX;nowY = ev.clientY;//獲得移動時的當前坐標minusX = nowX - lastX;//坐標差minusY = nowY - lastY;//坐標差//累計差值，如果不累計的話轉輪在每次點擊-->移動后都會從第一張開始。roY += minusX;roX -= minusY;//累計差值//轉動容器的x軸和y軸，使其轉動度數(數值，不帶單位)等于鼠標坐標差。oWrap.style.transform = "rotateX("+roX+"deg)"+"rotateY("+roY+"deg)";lastX = nowX;lastY = nowY;//移動末期現坐標變為舊坐標}this.onmouseup = function(){this.onmousemove = null;//取消鼠標移動的影響// this.onmousedown = null;}}}完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">*{margin: 0;
padding: 0;}
body{overflow: hidden;background: #000000;}
/* 場景景深 */#perspective{perspective: 700px;
}#wrap{position: relative;width: 200px;
height: 200px;margin: 150px auto;
border: 1px solid black;transform-style: preserve-3d;transform: rotateX(-15deg) rotateY(0deg) ;
/*景深可以簡寫在此屬性里*/}#wrap img{position: absolute;
width: 200px;
transform: rotateX(0deg) rotateY(0deg);
box-shadow: 0px 0px 1px #000000;
/* 用box-shadow可以忽略層級問題 */}
</style>
</head>
<body>
<div id="perspective">
<div id="wrap">
<img src="img3/preview1.jpg" >
<img src="img3/preview2.jpg" >
<img src="img3/preview3.jpg" >
<img src="img3/preview4.jpg" >
<img src="img3/preview5.jpg" >
<img src="img3/preview6.jpg" >
<img src="img3/preview7.jpg" >
<img src="img3/preview8.jpg" >
<img src="img3/preview9.jpg" >
<img src="img3/preview10.jpg" >
<img src="img3/preview11.jpg" >
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var oImg = document.getElementsByTagName('img'),oWrap = document.getElementById('wrap');
var Deg = 360/(oImg.length);Array.prototype.forEach.call(oImg,function(el,index){el.style.transform = "rotateY("+Deg*index+"deg)translateZ(350px)";
// el.style.zIndex = -index;el.style.transition = "transform 1s "+ index*0.1 +"s";});
var nowX ,nowY,//當前鼠標坐標
lastX ,lastY ,//上一次鼠標坐標
minusX,minusY ,//距離差
roX = -10,roY = 0;//總旋轉度數
window.onmousedown = function(ev){var ev = ev;//獲得事件源
lastX = ev.clientX;lastY = ev.clientY;this.onmousemove = function(ev){var ev = ev;//獲得事件源
nowX = ev.clientX;nowY = ev.clientY;//獲得當前坐標
minusX = nowX - lastX;minusY = nowY - lastY;//坐標差
roY += minusX;//累計差值
roX -= minusY;//累計差值
oWrap.style.transform = "rotateX("+roX+"deg)"+"rotateY("+roY+"deg)";lastX = nowX;lastY = nowY;//移動末期現坐標變為舊坐標}
this.onmouseup = function(){this.onmousemove = null;//取消鼠標移動的影響
// this.onmousedown = null;
}}}</script>
</body>
</html>以上就是純js怎樣實現3d相冊，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
