百葉窗效果
簡陋佈局
<ul id="ul"><li><div><p>這是一個百葉窗效果，測試1</p><p>這是一個百葉窗效果，測試2</p></div></li><li><div><p>這是一個百葉窗效果，測試3</p><p>這是一個百葉窗效果，測試4</p></div></li><li><div><p>這是一個百葉窗效果，測試5</p><p>這是一個百葉窗效果，測試6</p></div></li><li><div><p>這是一個百葉窗效果，測試7</p><p>這是一個百葉窗效果，測試8</p></div></li><li><div><p>這是一個百葉窗效果，測試9</p><p>這是一個百葉窗效果，測試A</p></div></li></ul> window.onload = function () {
var ul = document.getElementById('ul')
var iNow = 0; //從第0個div - 第N個div，有層次變化，需要一個當前值;
var timer = null;
var onoff = true;//開關，一次真一次假
toShow(ul)
function toShow(obj) {
var div = obj.getElementsByTagName('div')
setInterval(function () {
toChange();//有頻率的變化，層次效果
}, 2000)
function toChange() {
timer = setInterval(function () { //第二個定時器，有層次效果
if (iNow == div.length) { //需要判斷定時器何時結束，所以需要一個tiemr
clearInterval(timer);
iNow = 0;
onoff = !onoff;
}
else if (onoff) {
startMove(div[iNow], {top: 0}); //一次為0，一次為30,所以需要一個開關 onoff
iNow++;
}
else {
startMove(div[iNow], {top: -30});
iNow++;
}
}, 100)
}
}
}*{ margin: 0; padding: 0;} li{list-style:none;} #ul{ width: 300px; height: auto;border-top:3px solid #333; margin: 20px auto;text-indent: 1em;} li{ width: 100%; height: 30px; overflow: hidden; position: relative; border-bottom:1px solid #2291AB;line-height: 30px;} li div{ position: absolute; top: -30px;} li div p{ height: 30px;}