JavaScript實(shí)現(xiàn)一個(gè)前端會(huì)魔法的旋轉(zhuǎn)魔方相冊(cè)
效果圖

實(shí)現(xiàn)功能:
點(diǎn)擊下方圖片可翻轉(zhuǎn)到對(duì)應(yīng)圖片
實(shí)現(xiàn)思路:
- 構(gòu)建盒子模型,完成html代碼編寫
- 設(shè)置樣式,利用transform3D做出魔方
- JS構(gòu)建事件
1. HTML篇
魔方中用<li>標(biāo)簽包含圖片,方便用<ul>包裹,后面給ul添加3D模式便可進(jìn)行翻折
比較簡(jiǎn)單不過多講解,代碼如下:

2. CSS篇
2.1 基礎(chǔ)設(shè)置
清除樣式默認(rèn)的內(nèi)外邊距,直接上代碼:

2.2 魔方樣式
主要是給父元素設(shè)置transform-style: preserver-3d;,對(duì)所有l(wèi)i子元素進(jìn)行3D轉(zhuǎn)換,后面便于用transform折疊這里用子絕父相的定位模式設(shè)定,是為了讓ul下的所有l(wèi)i都放在父元素ul框內(nèi)
也就是給每個(gè)li加定位——top: 0 ; 和 left: 0;
如果你設(shè)置的圖片的原本尺寸并不是一致,你需要給img強(qiáng)制設(shè)置寬高,這樣圖片會(huì)強(qiáng)制更改自身尺寸
transition屬性設(shè)置:
- 第一屬性值是選擇子元素的種類,all就是全部子元素
- 第二屬性值是持續(xù)時(shí)間
- 第三屬性值是速度變化曲線,這里用到的是貝塞爾曲線,這個(gè)無需過多關(guān)注,可以直接拿來用,值得說的是,第四個(gè)屬性值你可以理解為最遠(yuǎn)達(dá)到距離,這里設(shè)置1.275就是魔方旋轉(zhuǎn)到達(dá)目的地后在轉(zhuǎn)個(gè)0.275,然后再回到目的地,這也是實(shí)現(xiàn)旋轉(zhuǎn)抖動(dòng)的原理
代碼實(shí)現(xiàn)如下:

2.3 圖片折疊
- 前面其實(shí)已經(jīng)做好鋪墊,接下來我們只需要設(shè)置每個(gè)圖片各XY的翻轉(zhuǎn)角度,Z的位移,就可以組成魔方
- 如果不知道怎么回事的,可以再重溫一下transform的rotate屬性,簡(jiǎn)單說明一下
rotateX就是以X軸為對(duì)稱中翻轉(zhuǎn),朝上為正,朝下為負(fù),Y同理 - 這里設(shè)置translateZ,簡(jiǎn)單理解就是把頁面文檔流看作地面,這里設(shè)置圖片的高度, 全部設(shè)置為100px是為了讓圖片在一個(gè)高度,構(gòu)成封閉魔方
代碼實(shí)現(xiàn)如下:

2.4 圖片按鈕樣式
也就是實(shí)現(xiàn)下面效果

這一塊比較簡(jiǎn)單,牛牛就不多做介紹,講一個(gè)文章出現(xiàn)過的知識(shí)點(diǎn)——background-size: contain; 該屬性會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。

2.5 設(shè)置配合JS使用的翻轉(zhuǎn)樣式
這里需要 一定的理解能力,建議配合后面的JS代碼一起看
講一下具體思路:
- 當(dāng)我們對(duì)下方圖片觸發(fā)點(diǎn)擊事件時(shí),通過JS給魔方的ul加相對(duì)應(yīng)類名,類名對(duì)應(yīng)設(shè)置了transform樣式,也就實(shí)現(xiàn)了點(diǎn)擊觸發(fā)相對(duì)應(yīng)的魔方旋轉(zhuǎn)
- 下面代碼的原理和上一節(jié)一致,不過需要注意的是,下面旋轉(zhuǎn)的對(duì)象是整個(gè)魔方,而上一節(jié)旋轉(zhuǎn)對(duì)象只是相對(duì)應(yīng)的一張圖片而已。

3. JS篇
最關(guān)鍵的部分來了
- 首先我們需要知道,這塊JS代碼是用來為事件服務(wù)的,需要遵循三步就行:獲取變量、創(chuàng)建事件、回調(diào)函數(shù)
- 定義變量比較簡(jiǎn)單,根據(jù)自己創(chuàng)建事件中需要什么,去獲取頁面對(duì)象
- 接下來我們需要實(shí)現(xiàn)當(dāng)點(diǎn)擊下方圖片時(shí),需要分辨是哪一張,我們可以看到在html篇中下方圖片的類名其實(shí)是跟2.5節(jié)需要設(shè)置的類名是相對(duì)應(yīng)的
- 因此我們直接創(chuàng)建onclick事件,在回調(diào)函數(shù)中將點(diǎn)擊圖片的類名賦給我們的ul盒子,點(diǎn)擊哪個(gè)圖片,就執(zhí)行對(duì)應(yīng)的翻轉(zhuǎn)
- 小實(shí)踐: 創(chuàng)建事件大家會(huì)不會(huì)覺得有些代碼重復(fù)贅余的感覺,其實(shí)我們可以把這個(gè)回調(diào)函數(shù)封裝起來,調(diào)用函數(shù)傳入序號(hào)即可實(shí)現(xiàn),感興趣的可以做一下,如果需要封裝代碼,可以在評(píng)論區(qū)留言,牛牛會(huì)找個(gè)時(shí)間更新一下

4. 完整代碼
4.1 html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋轉(zhuǎn)魔方相冊(cè)</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: rgba(0, 0, 0, 0.8);
}
/* 魔方樣式設(shè)置部分 */
.square{
width: 200px;
height: 200px;
margin: 200px auto;
margin-bottom: 100px;
}
ul{
position: relative;
transform-style: preserve-3d;
transition: all .7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: 100%;
height: 100%;
}
li{
/* display: inline-block; */
position: absolute;
top: 0;
left: 0;
list-style: none;
width: 100%;
height: 100%;
border: 1px solid pink;
}
img{
width: 200px;
height: 200px;
}
/* 初始位置 */
/* ul{
transform: translateZ(-100px) rotateX(-15deg) rotateY(15deg);
} */
/* 折疊圖片,構(gòu)成魔方 */
ul li:nth-child(1) {
transform: translateZ(100px);
}
ul li:nth-child(2) {
transform: rotateY(180deg) translateZ(100px);
}
ul li:nth-child(3) {
transform: rotateY(90deg) translateZ(100px);
}
ul li:nth-child(4) {
transform: rotateY(-90deg) translateZ(100px);
}
ul li:nth-child(5) {
transform: rotateX(90deg) translateZ(100px);
}
ul li:nth-child(6) {
transform: rotateX(-90deg) translateZ(100px);
}
/* 下方是點(diǎn)擊目錄 */
.img_1{
background-image: url(2.jpeg);
}
.img_2{
background-image: url(1.jpeg);
}
.img_3{
background-image: url(3.jpeg);
}
.img_4{
background-image: url(4.jpeg);
}
.img_5{
background-image: url(5.jpeg);
}
.img_6{
background-image: url(6.jpeg);
}
span{
display: inline-block;
width: 50px;
height: 25px;
background-size: contain;
border: 1px solid white;
}
.toc{
width: 350px;
margin: 0 auto;
}
/* 輔助JS塊樣式設(shè)置 */
.square .img_1 {
transform: translateZ(-100px);
}
.square .img_2 {
transform: translateZ(-100px) rotateX(-180deg) ;
}
.square .img_3 {
transform: translateZ(-100px) rotateY(-90deg) ;
}
.square .img_4 {
transform: translateZ(-100px) rotateY(90deg) ;
}
.square .img_5 {
transform: translateZ(-100px) rotateX(-90deg) ;
}
.square .img_6 {
transform: translateZ(-100px) rotateX(90deg) ;
}
</style>
</head>
<body>
<!-- 魔方 -->
<div class="square">
<ul class="s-img">
<li><img src="2.jpeg"></li>
<li><img src="1.jpeg"></li>
<li><img src="3.jpeg"></li>
<li><img src="4.jpeg"></li>
<li><img src="5.jpeg"></li>
<li><img src="6.jpeg"></li>
</ul>
</div>
<!-- 手動(dòng)點(diǎn)擊旋轉(zhuǎn) -->
<div class="toc">
<span class="img_1"></span>
<span class="img_2"></span>
<span class="img_3"></span>
<span class="img_4"></span>
<span class="img_5"></span>
<span class="img_6"></span>
</div>
<!-- JS -->
<script src="cube.js">
</script>
</body>
</html>
4.2 js文件
window.onload = function(){
//toc目錄設(shè)置
var toc_img = document.querySelector('.toc');
var square = document.querySelector('ul');
var p_img = square.classList;
var img_button = toc_img.querySelectorAll('span');
var flage = '';
img_button[0].onclick = function(e) {
flage = img_button[0].className;
square.setAttribute('class', flage);
}
img_button[1].onclick = function(e) {
flage = img_button[1].className;
square.setAttribute('class', flage);
}
img_button[2].onclick = function(e) {
flage = img_button[2].className;
square.setAttribute('class', flage);
}
img_button[3].onclick = function(e) {
flage = img_button[3].className;
square.setAttribute('class', flage);
}
img_button[4].onclick = function(e) {
flage = img_button[4].className;
square.setAttribute('class', flage);
}
img_button[5].onclick = function(e) {
flage = img_button[5].className;
square.setAttribute('class',flage);
}
}
到此這篇關(guān)于JavaScript實(shí)現(xiàn)一個(gè)前端會(huì)魔法的旋轉(zhuǎn)魔方相冊(cè)的文章就介紹到這了,更多相關(guān)JavaScript魔方相冊(cè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS相冊(cè)圖片抖動(dòng)放大展示效果的示例代碼
- JavaScript制作3D旋轉(zhuǎn)相冊(cè)
- javascript實(shí)現(xiàn)QQ空間相冊(cè)展示源碼
- JavaScript+CSS相冊(cè)特效實(shí)例代碼
- JS實(shí)現(xiàn)的相冊(cè)圖片左右滾動(dòng)完整實(shí)例
- JavaScript實(shí)現(xiàn)相冊(cè)彈窗功能(zepto.js)
- js實(shí)現(xiàn)有過渡漸變效果的圖片輪播相冊(cè)(兼容IE,ff)
- 原生js實(shí)現(xiàn)移動(dòng)開發(fā)輪播圖、相冊(cè)滑動(dòng)特效
相關(guān)文章
Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)
這篇文章主要介紹了Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)的相關(guān)資料,需要的朋友可以參考下2016-05-05
javascript一些不錯(cuò)的函數(shù)腳本代碼
收集一些不多見的好用的自定義函數(shù)代碼 計(jì)算字符長(zhǎng)度的js函數(shù) 去字符中前后的空格的js函數(shù) 圖片自適應(yīng)大小函數(shù)代碼2008-09-09
TypeScript學(xué)習(xí)之強(qiáng)制類型的轉(zhuǎn)換
眾所周知TypeScript是一種由微軟開發(fā)的自由和開源的編程語言。它是JavaScript的一個(gè)超集,而且本質(zhì)上向這個(gè)語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊蹋旅孢@篇文章主要介紹了TypeScript中強(qiáng)制類型的轉(zhuǎn)換,需要的朋友可以參考借鑒下。2016-12-12
JavaScript Event Loop相關(guān)原理解析
這篇文章主要介紹了JavaScript Event Loop相關(guān)原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
JavaScript深入V8引擎以及編寫優(yōu)化代碼的5個(gè)技巧
這篇文章主要介紹了JavaScript深入V8引擎以及編寫優(yōu)化代碼的5個(gè)技巧,JavaScript引擎是執(zhí)行 JavaScript 代碼的程序或解釋器。JavaScript引擎可以實(shí)現(xiàn)為標(biāo)準(zhǔn)解釋器,或者以某種形式將JavaScript編譯為字節(jié)碼的即時(shí)編譯器。,需要的朋友可以參考下2019-06-06
JavaScript iframe 實(shí)現(xiàn)多窗口通信實(shí)例詳解
這篇文章主要為大家介紹了JavaScript iframe 實(shí)現(xiàn)多窗口通信實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)移動(dòng)切換圖片的方法
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)移動(dòng)切換圖片的方法,涉及JavaScript針對(duì)鼠標(biāo)事件的響應(yīng)及頁面元素的動(dòng)態(tài)變換技巧,需要的朋友可以參考下2016-02-02
js/ajax跨越訪問-jsonp的原理和實(shí)例(javascript和jquery實(shí)現(xiàn)代碼)
最近做了一個(gè)項(xiàng)目,需要用子域名調(diào)用主域名下的一個(gè)現(xiàn)有的功能,于是想到了用jsonp來解決,在我們平常的項(xiàng)目中不乏有這種需求的朋友,于是記錄下來以便以后查閱同時(shí)也希望能幫到大家,需要了解的朋友可以參考下2012-12-12

