自己動手做漂亮的照片框特效 照片框 總結

照片框

效果圖

HTML結構

            <div class="wch-scroll-picture">
                
                <div class="wch-picture"></div>
                <div class="wch-outline"></div>
                <div class="wch-picture-download"></div>
                <div class="wch-picture-2"></div>
                <div class="wch-picture-3"></div>
                <div class="wch-picture-4"></div>

            </div>

主要有兩個大部分組成一個是承載照片的照片框容器<div class="wch-scroll-picture">，還有一部分是裏面的照片容器。

CSS結構

CSS也是分爲兩部分來看首先是 照片框容器

.wch-scroll-picture{
    height: 100%;
    width: 100%;
    display: block;
    box-sizing: border-box;
    overflow-y: scroll;
    transition:all 2s  ease 0.2s;
}

.wch-scroll-picture::-webkit-scrollbar { width: 0 !important }

.wch-scroll-picture { -ms-overflow-style: none; }

.wch-scroll-picture { overflow: -moz-scrollbars-none; }、

我會盡量詳細的說明每一個屬性的作用
height: 100%;width: 100%;設置了容器的高度爲100% 寬度也是100% 生效的前提是設置了body 和 html 元素的高度和寬度也是 100%。
display: block;box-sizing: border-box;設置爲塊級元素 並設置 盒模型爲帶邊框計算模型。
overflow-y: scroll;設置豎軸Y超出部分爲滑動顯示。
transition:all 2s ease 0.2s; 設置屬性平滑變化

.wch-scroll-picture::-webkit-scrollbar { width: 0 !important }
.wch-scroll-picture { -ms-overflow-style: none; }
.wch-scroll-picture { overflow: -moz-scrollbars-none; }

強制覆蓋設置側邊滑動欄寬度爲0，隱藏側邊滑動欄。

接下來看的是照片容器的設置，因爲所有照片樣式都是大同小異，所以在此只看一個了。

.wch-picture{

    height: 100%;
    width: 100%;
    background: url(./img/dawn.png) no-repeat 0 0;
    background-size: cover;
    background-attachment: fixed;
    box-sizing: border-box;

}

這裏需要注意的是設置了高度和寬度爲100%，同時設置了background-attachment: fixed;此屬性的作用是是的此元素在頁面滑動的時候固定不會跟着一起滑動這邊劃重點哈，哈哈。

JS部分

var index = 1;

window.setInterval(function(){ 

    var sc = window.document.getElementsByClassName("wch-scroll-picture")[0];
    var height = document.body.clientHeight;
    sc.scrollTo({top:height*index,behavior:"smooth"})
    index = index +1;

    if(index == 4){
        index = 0;
    }

 }, 2000);

這邊就是簡單使用定時器定時將照片框的定位到每張不同的照片，很簡單，沒什麼好說的哈。

總結

本文的所以代碼資源可以點擊鏈接下載
有待改進的地方

1. 沒有在頁面做小圓點提示當前照片頁數位置
2. 在照片也過多時，設置的間隔時間不夠返回頁頂，導致頁面錯亂。