每逢佳節胖三斤啊，胖了胖了，加上每天坐在電腦前，現在還和一個智障聊天，后天去蘇州玩的事情，住哪里啊？去哪里嘿嘿嘿啊？
蘇州，找了下，攻略，聽說一定要去園林看，聽說很牛逼，好吧，陶冶一下我的情操。今天操作的是一個，百葉窗效果的一個頁面特
效，好，現在直接上最終效果吧。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>