阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 百叶窗效果

      代码第一部分

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>百叶窗效果的布局</title>
          <style>
              #container{
                  width: 816px;
                  height: 582px;
                  position: relative;
                  background: orange;
              }
              #container div{
                  display: block;
                  position: absolute;
                  background: url("img/zhume.jpg") repeat 0 0;
              }
          </style>
      </head>
      <body>
      <img src="img/zhume.jpg" alt="图片"/>
      <div id="container"></div>
      </body>
      </html>
      <script>
          /*下面是百叶窗,布局*/
          var container=document.getElementById("container");
          var rows=5;
          var cols=10;
          var w=container.offsetWidth/cols;//每个DIV的宽;
          var h=container.offsetHeight/rows;//每个DIV的宽;
      
          for(var i= 0,len=rows*cols;i<len;i++){
              var oDiv=document.createElement("div");
              container.appendChild(oDiv);
      /*        i%cols;//这是列号;
              Math.floor(i/cols);//这是行号;*/
              var l=i%cols*w;
              var t=Math.floor(i/cols)*h;
              oDiv.style.left=l+"px";
              oDiv.style.top=t+"px";
              oDiv.style.height=h+"px";
              oDiv.style.width=w+"px";
              oDiv.style.backgroundPosition=-l+"px -"+t+"px";//图片背景定位;
          }
      </script>
      

      代码第二部分

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>百叶窗效果</title>
          <style>
              #container{
                  width: 816px;
                  height: 434px;
                  position: relative;
                  background: orange;
              }
              #container div{
                  display: block;
                  position: absolute;
                  background: url("img/zhume.jpg") repeat 0 0;
              }
              #btn1{width: 100px;height: 30px;position: absolute;left: 716px;top:450px;}
          </style>
      </head>
      <body>
      <div id="container"></div>
      <input type="button" value="按钮1" id="btn1"/>
      </body>
      </html>
      <script src="starMove.js"></script>
      <script>
          /*下面是百叶窗,布局*/
          var container=document.getElementById("container");
          var rows=3;
          var cols=10;
          var w=container.offsetWidth/cols;//每个DIV的宽;
          var h=container.offsetHeight/rows;//每个DIV的宽;
          var a=[];
      
          for(var i= 0,len=rows*cols;i<len;i++){
              var oDiv=document.createElement("div");
              container.appendChild(oDiv);
              var l=i%cols*w;
              var t=Math.floor(i/cols)*h;
      
              oDiv.t=t;//把最终的目的地保存在自定义属性上;
              oDiv.l=l;
              oDiv.style.height=h+"px";
              oDiv.style.width=w+"px";
              oDiv.style.backgroundPosition=-l+"px -"+t+"px";//图片背景定位;
              //通过设置left和top把DIV隐藏起来
              if(Math.floor(i/cols)===0){
                  oDiv.style.left=-1000+l+"px";
                  oDiv.style.top=-500+t+"px";
              }else if(Math.floor(i/cols)===1){
                  oDiv.style.left=-1000+l+"px";
                  oDiv.style.top=t+"px";
              }else if(Math.floor(i/cols)===2){
                  oDiv.style.left=-1000+l+"px";
                  oDiv.style.top=500+t+"px";
              }
              /*DIV放到数组里*/
              a.push(oDiv);
          }
      
          var oBtn1=document.getElementById("btn1");
          oBtn1.onclick=function(){
              for(i=0,len= a.length;i<len;i++){
                  (function(i){
                      setTimeout(function(){
                          starMove(a[i],{left:a[i].l,top:a[i].t},600,9)
                      },i%cols*100)
                  })(i)
             }
          };
      </script>
      
      目录
      目录