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

更新時(shí)間：2022年06月14日 10:00:47 作者：前端小劉不怕牛牛

星光不問趕路人，時(shí)光不誤有心人，牛牛最近學(xué)到了一個(gè)神奇的旋轉(zhuǎn)魔方，今天就來(lái)分享給大家吧，希望大家能喜歡

效果圖

實(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è)無(wú)需過多關(guān)注，可以直接拿來(lái)用，值得說的是，第四個(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)做好鋪墊，接下來(lái)我們只需要設(shè)置每個(gè)圖片各XY的翻轉(zhuǎn)角度，Z的位移，就可以組成魔方
如果不知道怎么回事的，可以再重溫一下transform的rotate屬性，簡(jiǎn)單說明一下rotateX就是以X軸為對(duì)稱中翻轉(zhuǎn)，朝上為正，朝下為負(fù)，Y同理
這里設(shè)置translateZ，簡(jiǎn)單理解就是把頁(yè)面文檔流看作地面，這里設(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)鍵的部分來(lái)了

首先我們需要知道，這塊JS代碼是用來(lái)為事件服務(wù)的，需要遵循三步就行：獲取變量、創(chuàng)建事件、回調(diào)函數(shù)
定義變量比較簡(jiǎn)單，根據(jù)自己創(chuàng)建事件中需要什么，去獲取頁(yè)面對(duì)象
接下來(lái)我們需要實(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ù)封裝起來(lái)，調(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: