網頁頁面載入百葉窗特效 簡潔版製作

實現原理

在網頁所有元素的上添加一個遮罩層，給這個遮罩層進行樣式的編輯，分成爲不同的DIV標籤。利用js操作遮罩層元素的移動

html頁面

<div class="mantle" id="01"></div>
  <div class="mantle" id="02"></div>
  <div class="mantle" id="03"></div>
  <div class="mantle" id="04"></div>
  <div class="mantle" id="05"></div>
  <div class="mantle" id="06"></div>
  <div class="mantle" id="07"></div>
  <div class="mantle" id="08"></div>
  <div class="mantle" id="09"></div>
  <div class="mantle" id="10"></div>

css頁面

*{
    padding:0;
    margin:0;
}
body{
    
    background-image: url("003.jpg");
    background-size: 100%,100%;
}
.mantle{
    position: relative;
    top:0px;
    left:0px;
    height:94px;
    width:100%;
    background-color:white;
}

js

window.onload = function(){
    start();
    function start(){
        window.group = new Array();
        group = this.document.getElementsByClassName("mantle");
       returnback = setInterval(moveBar,100);
    }
   function moveBar(){
     if(group){
         for(var index=0,length=group.length;index<length;index++){
             console.log(group[0].offsetLeft);
             if(index%2 == 0){
                    //向左走
                    group[index].style.left = (group[index].offsetLeft - 100) + "px";
             }else{
                    //向右走
                    group[index].style.left = (group[index].offsetLeft + 100) + "px";
             }
         }
         if(group[0].offsetLeft < -(document.body.clientWidth)){
             clearInterval(returnback);
         }
     }
   }
}

moveBar()函數對所有元素進行一個像素的移動，start()函數上面使用定時器執行moveBar()函數