欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實現(xiàn)一個前端會魔法的旋轉(zhuǎn)魔方相冊

 更新時間：2022年06月14日 10:00:47   作者：前端小劉不怕牛牛  
星光不問趕路人，時光不誤有心人，牛牛最近學到了一個神奇的旋轉(zhuǎn)魔方，今天就來分享給大家吧，希望大家能喜歡

效果圖

實現(xiàn)功能：

點擊下方圖片可翻轉(zhuǎn)到對應圖片

實現(xiàn)思路：

  • 構(gòu)建盒子模型，完成html代碼編寫
  • 設置樣式，利用transform3D做出魔方
  • JS構(gòu)建事件

1. HTML篇

魔方中用<li>標簽包含圖片，方便用<ul>包裹，后面給ul添加3D模式便可進行翻折

比較簡單不過多講解,代碼如下：

2. CSS篇

2.1 基礎設置

清除樣式默認的內(nèi)外邊距，直接上代碼：

2.2 魔方樣式

主要是給父元素設置transform-style: preserver-3d;，對所有l(wèi)i子元素進行3D轉(zhuǎn)換，后面便于用transform折疊這里用子絕父相的定位模式設定，是為了讓ul下的所有l(wèi)i都放在父元素ul框內(nèi)

也就是給每個li加定位——top: 0 ; 和 left: 0;

如果你設置的圖片的原本尺寸并不是一致，你需要給img強制設置寬高，這樣圖片會強制更改自身尺寸

transition屬性設置：

  • 第一屬性值是選擇子元素的種類，all就是全部子元素
  • 第二屬性值是持續(xù)時間
  • 第三屬性值是速度變化曲線，這里用到的是貝塞爾曲線，這個無需過多關注，可以直接拿來用，值得說的是，第四個屬性值你可以理解為最遠達到距離，這里設置1.275就是魔方旋轉(zhuǎn)到達目的地后在轉(zhuǎn)個0.275，然后再回到目的地，這也是實現(xiàn)旋轉(zhuǎn)抖動的原理

代碼實現(xiàn)如下：

2.3 圖片折疊

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

代碼實現(xiàn)如下：

2.4 圖片按鈕樣式

也就是實現(xiàn)下面效果

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

2.5 設置配合JS使用的翻轉(zhuǎn)樣式

這里需要 一定的理解能力，建議配合后面的JS代碼一起看

講一下具體思路：

  • 當我們對下方圖片觸發(fā)點擊事件時，通過JS給魔方的ul加相對應類名，類名對應設置了transform樣式，也就實現(xiàn)了點擊觸發(fā)相對應的魔方旋轉(zhuǎn)
  • 下面代碼的原理和上一節(jié)一致，不過需要注意的是，下面旋轉(zhuǎn)的對象是整個魔方，而上一節(jié)旋轉(zhuǎn)對象只是相對應的一張圖片而已。

3. JS篇

最關鍵的部分來了

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

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)魔方相冊</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: rgba(0, 0, 0, 0.8);
        }
        /* 魔方樣式設置部分 */
        .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);
        }
        
        /* 下方是點擊目錄 */
        .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塊樣式設置 */
        .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>
    <!-- 手動點擊旋轉(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目錄設置
    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);
    }
}

到此這篇關于JavaScript實現(xiàn)一個前端會魔法的旋轉(zhuǎn)魔方相冊的文章就介紹到這了,更多相關JavaScript魔方相冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論