今天操作的是一個，百葉窗效果的一個頁面特效，好，現在直接上最終效果吧。demo做的有點low,不過效果都在了
這是html和css代碼：思路就是，每一個li里面div，放幾個p,通過調節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>關鍵在這里：可以來這里下載
<script src="js庫/move.min.js"></script>
導入這個，這個插件怎么用呢？具體的我就不講了，可以看這里 ,這篇文章講的挺好的。關鍵就是，move()里面取代的對象，跟jquery $取DOM節點對象一樣,下面簡單的陳了一些方法
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代碼，整體思路是，兩個定時器，一個定時器來定時總的時間，多久后開始，第二次定時器，是每個小div，依次多久執行動畫。
<script> window.onload = function(){ var num=1; /*為了取到各個div*/ var timer=null;/*定義定時器*/ 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> 以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
