快捷導(dǎo)航

用move.js庫實(shí)現(xiàn)百葉窗特效

更新時(shí)間：2017年02月08日 08:58:35 作者：xiao_style

本文主要介紹了用move.js庫實(shí)現(xiàn)百葉窗特效的思路與方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧

今天操作的是一個(gè)，百葉窗效果的一個(gè)頁面特效，好，現(xiàn)在直接上最終效果吧。demo做的有點(diǎn)low,不過效果都在了

這是html和css代碼：思路就是，每一個(gè)li里面div，放幾個(gè)p,通過調(diào)節(jié)translatY，來控制。

<style>
   *{
    padding: 0;
    margin: 0;
    list-style: none;
   }
   #bai{
    width: 400px;
    height: auto;
    float: left;
    margin-left:20px auto;
   }
   li{
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px dashed #000;
    position: relative;
    overflow: hidden;
   }
   div.box{
    width: 100%;
    height: 50px;
    position: absolute;
    top: -50px;
   }
   p{
    height: 50px;
   }
  </style>
 </head>
 <body>
  <ul id="bai">
   <li>
    <div class="box a1">
     <p>1111111111111111</p>
     <p>22222222222222222</p>
    </div>
   </li>
   <li>
    <div class="box a2">
     <p>33333333333333333</p>
     <p>44444444444444444</p>
    </div>
   </li>
   <li>
    <div class="box a3">
     <p>55555555555555555</p>
     <p>66666666666666666</p>
    </div>
   </li>
   <li>
    <div class="box a4">
     <p>77777777777777777</p>
     <p>88888888888888888</p>
    </div>
   </li>
  </ul>

關(guān)鍵在這里：可以來這里下載　

<script src="js庫/move.min.js"></script>

導(dǎo)入這個(gè)，這個(gè)插件怎么用呢？具體的我就不講了，可以看這里 ,這篇文章講的挺好的。關(guān)鍵就是，move()里面取代的對(duì)象，跟jquery $取DOM節(jié)點(diǎn)對(duì)象一樣,下面簡單的陳了一些方法

move('.square')
 .to(500, 200)
 .rotate(180)
 .scale(.5)
 .set('background-color', '#FF0551')
 .set('border-color', 'black')
 .duration('3s')
 .skew(50, -10)
 .then()
 .set('opacity', 0)
 .duration('0.3s')
 .scale(0.1)
 .pop()
 .end();

接下來，放上接下來全部js代碼，整體思路是，兩個(gè)定時(shí)器，一個(gè)定時(shí)器來定時(shí)總的時(shí)間，多久后開始，第二次定時(shí)器，是每個(gè)小div，依次多久執(zhí)行動(dòng)畫。

<script>
      window.onload = function(){
        var num=1; /*為了取到各個(gè)div*/
        var timer=null;/*定義定時(shí)器*/
        var tet = false;/*這里用來判斷方向*/
        ding();
        function ding(){
          setInterval(function(){
            change();
          },3000)
        }
        function change(){
          timer=setInterval(function(){
            if(num == 5){
              clearInterval(timer);
              num=1;
              tet = !tet;
            }
            else if(tet == false){
              move("#bai .a"+num+"").y(50).end();/*這里用到就是，move中的translateY方法，簡稱y()*/
              num++;
            }
            else{
              move("#bai .a"+num+"").y(0).end();
              num++;
            }
          },100)
        }
      }
    </script>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: