JQuery 黑馬案例手風琴 ! Important（名片摺疊案例）

阿新 • • 發佈：2020-12-31

技術標籤：jquery 自學html+css 黑馬案例 html jquery css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link 
 rel="stylesheet" href="index.css">
</head>
<body>
    <div class="king-box">
        <ul>
            <li class="current">
                <a href=""> <!-- 設定定位poa的元素必須給自身寬高，因為設定完poa寬高預設是0 -->
                    < 
img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt=""  class="big">
                </a>
            </li>
            <li>
                <a href="">
                    < 
img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big"> 
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big"> 
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/t1.jpg" alt="" class="small" >
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>
</body>
<script src="jquery.min.js"></script>
<script src="index.js"></script>
<script>
    /*在此實現效果，當滑鼠移入時，當前移入的li中的small淡出，big淡入*/
/*其他兄弟類則相反，其他兄弟li中的big淡出，讓big的兄弟small淡入，順序不要寫反了，否則效果不一樣，仔細看明白效果之後再寫*/ 
/* $(function(){               滑鼠移入事件mouseenter 
    $('.king-box li').mouseenter(function(){
        效果有了，但是還需要其移入的寬度做變化，否則li的寬度為69，不夠大圖出來，因此看不出效果 
        觀察效果，發現一移上去，其移入的li變成由69變成224 
        $(this).stop().animate({
            width:224
        }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn()

        $(this).siblings('li').stop().animate({
            width:69                經測試，都差不多，這兩種順序不同差別比較小，在此均可實現效果
        }).find('.big').stop().fadeOut().siblings('.small').stop().fadeIn()
        自做：
        分割線——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
        原版：
        $(this).siblings('li').stop().animate({
            width:69
        }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
    })

})
}) */
</script>
</html>


/*在此實現效果，當滑鼠移入時，當前移入的li中的small淡出，big淡入*/
/*其他兄弟類則相反，其他兄弟li中的big淡出，讓big的兄弟small淡入，順序不要寫反了，否則效果不一樣，仔細看明白效果之後再寫*/ 
$(function(){               /*滑鼠移入事件mouseenter*/ 
    $('.king-box li').mouseenter(function(){
        /*效果有了，但是還需要其移入的寬度做變化，否則li的寬度為69，不夠大圖出來，因此看不出效果，肯定沒有動畫切換效果*/ 
        /*觀察效果，發現一移上去，其移入的li變成由69變成224*/ 
        $(this).stop().animate({
            width:224
        },300).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn()

/*         $(this).siblings('li').stop().animate({
            width:69
        }).find('.big').stop().fadeOut().siblings('.small').stop().fadeIn() */
        $(this).siblings('li').stop().animate({
            width:69
        }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
    })

})


/**/

.king-box{
    background:url("./images/bg.png") no-repeat;
    width: 872px;
    height: 89px;
    margin: 200px auto;
}

.small{
    width: 69px;
    height: 69px;
    display: block;
    /*預設小的圖片顯示*/
}
/*1.調整大小對應圖片的大小*/
/*2.預設第一個有current類的才顯示big，其餘沒有的僅僅顯示small，隱藏big，已實現後半句話~*/
.big{
    width: 224px;
    height: 69px;
    display: none;
    /*display: block;會看到均處於li的最左邊??? 不，small的定位與big無關，small定位依據的li，而非big*/
    /*預設大的圖片隱藏*/
}

.king-box ul{
    height: 89px;
    padding-top: 10px;/*把整個ul中的所有li均擠下來，要不位置不對不好看*/
}

.king-box li{
    float: left;
    list-style: none;
}

/*預設第一個有current類的li內部才顯示big，其餘沒有的僅僅顯示small，隱藏big*/
/*3.接下來實現前半句話，為第一個新增類，使big顯示，small隱藏*/

li.current .big{
    display: block;
}
/*已實現前半句話*/
li.current .small{
    display: none;
/*    display:block; 測試為什麼要給.samll 加 poa用*/
}



/*4.將小圖片依據li定位到left0 top0上，為什麼必須給小圖.samll開poa定位？？
———>目的就是因為每個img均為塊，經測試發現如果不給其中一個設定poa脫離文件流，兩個img同時有大圖片.big就會掉下來*/
.king-box li .small{
    position: absolute;
    /*設定定位後，必須給small自身寬高！！，為元素設定position時，如果沒有為其設定寬、高，則值預設為0*/
    left: 0px;
    height: 0px;
    width: 69px;
    height: 69px;
}

.king-box li{
    position: relative;     /*為li設定por，子絕父項，大圖是其sib（兄弟）*/
    /*脫離浮動了，必須給li一個寬高，否則圖片不顯示，因為內部的圖片是依據li定位的，li都沒了，沒發定位，就消失了*/
    width: 69px;
    height: 69px;
    /*這裡的li必須給寬高，因為需要與擁有current的li進行區別，滑鼠移入展開li寬度變化，其餘沒變的寬度必須是小的69(js中其他兄弟元素的animate效果)*/
    /*1.這裡給寬高的———>目的就是為了模擬讓未做動畫時的其他li元素均為69，即為縮起來小圖的寬高li，模擬其效果*/
    /*加了current的類，把width變成244，否則裝不下大圖*/
}

.king-box  li.current{
    /*必須提權，否則current類的li寬度給不上，就全是69*69的了*/
    width: 224px;/*加了current的類，把width變成244，否則裝不下大圖*/

    /*寫完js後回來，瞭解到current的含義，current類設定的寬度僅僅是第一個動畫開始前預留出的（動畫切換後大小的）開頭—
        ———>目的就是為了模擬第一個已經結束完動畫寬度由69到224
      因為一開始如果沒有current類，所有li的寬度均將是69，都是縮起來的.*/
}