网页页面载入百叶窗特效 简洁版制作

实现原理

在网页所有元素的上添加一个遮罩层，给这个遮罩层进行样式的编辑，分成为不同的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()函数