HTML+CSS+JS實現趣味相簿

一個快樂的程式媛發表於2020-10-13
HTMLCSSJS

依然不必多說，來康康程式碼，因為註釋我已經儘量詳細了，就不過多贅述~

先展示HTML結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>趣味相簿</title>
    <link rel="stylesheet" href="css/js-xc.css">
</head>
<body>
    <div class="fa">
        <div id="xc">
            <img src="image/01.jpeg" id="jpg-01" alt="" title="白鹿">
            <img src="image/02.jpeg" id="jpg-02" alt="" title="白鹿">
            <img src="image/03.jpeg" id="jpg-03" alt="" title="白鹿">
            <img src="image/04.jpeg" id="jpg-04" alt="" title="白鹿">
            <img src="image/05.jpeg" id="jpg-05" alt="" title="白鹿">
            <img src="image/06.jpeg" id="jpg-06" alt="" title="白鹿">
            <img src="image/07.jpeg" id="jpg-07" alt="" title="白鹿">
            <img src="image/08.jpeg" id="jpg-08" alt="" title="白鹿">
            <img src="image/09.jpeg" id="jpg-09" alt="" title="白鹿">
            <img src="image/10.jpeg" id="jpg-10" alt="" title="白鹿">
        </div>
        <div id="bigimg">
            <img src="" id="big-jpg" alt="">
        </div>
    </div>
    <script src="js/js-xc.js"></script>
</body>
</html>

然後是CSS
CSS程式碼就比較多了，雖然效果還可以繼續優化的，但是我就不接著寫了~

/* 初始化 */
* {
    padding: 0;
    margin: 0 auto;
}
html,body {
    height: 100%;
}
/* 最大的父盒子.fa */
.fa {
    /* 背景顏色 */
    background-color: rgb(236, 191, 236);
    width: 100%;
    height: 100%;
    /* 父相 */
    position: relative;
    /* 開啟視距 */
    perspective: 1000px;
}
/* 縮圖父盒子#xc */
.fa>#xc {
    width: 900px;
    height: 100%;
    /* 父相 */
    position: relative;
    /* 開啟3D */
    transform-style: preserve-3d;
}
/* 縮圖 */
.fa>#xc img {
    width: 20%;
    /* 子絕 */
    position: absolute;
    border: 1px dotted purple;
}
.fa #xc #jpg-01 {
    /* 定位 */
    top: 50px;
    left: 100px;
    /* 旋轉 */
    transform: rotateZ(30deg);
}
.fa #xc #jpg-02 {
    /* 定位 */
    top: 200px;
    left: 200px;
    /* 旋轉 */
    transform: rotateZ(-30deg);
}
.fa #xc #jpg-03 {
    /* 定位 */
    top: 100px;
    left: 300px;
    /* 旋轉 */
    transform: rotateZ(10deg);
}
.fa #xc #jpg-04 {
    /* 定位 */
    top: 50px;
    left: 500px;
    /* 旋轉 */
    transform: rotateZ(-20deg);
}
.fa #xc #jpg-05 {
    /* 定位 */
    top: 300px;
    left: 250px;
    /* 旋轉 */
    transform: rotateZ(20deg);
}
.fa #xc #jpg-06 {
    /* 定位 */
    top: 290px;
    left: 100px;
    /* 旋轉 */
    transform: rotateZ(-10deg);
}
.fa #xc #jpg-07 {
    /* 定位 */
    top: 280px;
    left: 500px;
    /* 旋轉 */
    transform: rotateZ(30deg);
}
.fa #xc #jpg-08 {
    /* 定位 */
    top: 240px;
    left: 650px;
    /* 旋轉 */
    transform: rotateZ(10deg);
}
.fa #xc #jpg-09 {
    /* 定位 */
    top: 250px;
    left: 400px;
    /* 旋轉 */
    transform: rotateZ(-20deg);
}
.fa #xc #jpg-10{
    /* 定位 */
    top: 430px;
    left: 320px;
    /* 旋轉 */
    transform: rotateZ(-10deg);
}
/* 大圖展示區域 */
.fa>#bigimg {
    /* 為了保證圖片形狀 和比例 父盒子不設定大小 靠圖片大小撐起來*/
    /* 子絕 */
    position: absolute;
    /* 定位父盒子中間 */
    top: 50%;
    left: 50%;
    /* css3 */
    transform: translateX(-50%) translateY(-50%);
    /* 最上層 */
    z-index: 100;
    /* 滑鼠未點選縮圖時隱藏 只隱藏 仍佔位 */
    visibility: hidden;
}
/* 大圖 */
.fa>#bigimg img {
    /* 只設定一個高度 寬度等比例縮放 */
    height: 400px;
    /* img行內塊元素 預設與父盒子基線對齊 改成底線對齊 */
    vertical-align: bottom;
}

JavaScript就是寫了幾個事件處理~

// 獲取元素
//  縮圖父盒子
var xc=document.getElementById("xc");
//  檢驗是否獲取到元素
console.log(xc);
//  大圖父盒子
var big_img=document.getElementById("bigimg")
console.log(big_img);
//  大圖
var big_jpg =big_img.querySelector("img")
console.log(big_jpg);
//  一組縮圖
var s_imgArr=xc.querySelectorAll("img");
console.log(s_imgArr);
//  設定變數 存縮圖疊放次序
var index = 10;

//註冊事件  處理程式
for (var i = 0; i < s_imgArr.length; i++) {
    //s_imgArr[i]
    s_imgArr[i].onmouseenter=function (){
        //  滑鼠進入  讓當前縮圖疊放在最上層
        this.style.zIndex=index;
    }
    s_imgArr[i].onmouseleave=function (){
        //  滑鼠離開  讓當前縮圖疊放次序歸0
        this.style.zIndex=0;
    }
    s_imgArr[i].onclick=function (){
        //  點選縮圖讓大圖顯示
        big_img.style.visibility="visible";
        // str=this.src;
        // console.log(str)
        big_jpg.src=this.src;
    }
}
big_jpg.onclick=function (){
    //  當大圖顯示時  再次點選大圖 隱藏大圖
    big_img.style.visibility="hidden";
}

好了，最重要的環節來了，看看效果圖吧~

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

有沒有看出玄機呢~ 滑鼠經過縮圖的時候，當前縮圖的疊放次序最大，視覺效果是完整顯示在最上面，當滑鼠離開時又回到初始狀態。

接著當滑鼠點選縮圖時，當前縮圖的大圖會在螢幕的正中心顯示出來，當再點選一次大圖後，大圖又隱藏了！有沒有很好玩~

大致就是這些內容啦，感興趣的小夥伴自己動手試一試吧，有疑問也可以提出來交流的哦，當然更歡迎大佬前來指點~~

相關文章