JS实现百叶窗效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实现百叶窗</title>
<!--原理：
首先，主要是根据li里的div是保存每一行所有要变化的信息，定时改变div的高度，溢出部分隐藏来实现。
通过2个setInterval来实现，外层setInterval用来控制多长时间改变一次内容，里层setInterval用来控制如何改变。-->
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#ul1,#ul2{ width:300px; height:auto; float:left; border-top:1px #000000 solid; margin:20px;}
li{ width:100%; height:30px; overflow:hidden; position:relative; border-bottom:1px #333333 dashed; line-height:30px;}
li div{ position:absolute; top:-30px;}
li div p { height:30px;}
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload = function(){
var oUl = document.getElementById('ul1');
var oUl2 = document.getElementById('ul2');
//先对左侧UL标签实行百叶窗效果；
toShow(oUl);
//两秒延迟后，对右侧UL标签实行百叶窗效果；
setTimeout(function(){
toShow(oUl2);
},2000); ࡣ
//实现百叶窗函数
function toShow(obj){
var aDiv = obj.getElementsByTagName('div');
var iNow = 0;//共有的内容行数；
var timer = null;//setInterval的返回值，用于clearInterval；
var bBtn = true;
//UL定时每4秒变换1次
setInterval(function(){
toChange();
},4000);
//UL变换1次
function toChange(){
//通过setInterval来对每一个li依次改变
timer = setInterval(function(){
//如果UL的每个li都变换过了，则停止，等待外层toShow（）再次调用toChange（）函数；
if(iNow==aDiv.length){
clearInterval(timer);
iNow = 0;
bBtn = !bBtn;//用于从上往下信息滚完了，再从下往上回滚；
}
else if(bBtn){
startMove(aDiv[iNow],{top:0});
iNow++; //为了下次定时执行时变为操作下一条内容的变换
}
else{
startMove(aDiv[iNow],{top:-30});
iNow++;
}
},100);
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>
<div>
<p>1111111111</p>
<p>2222222222</p>
</div>
</li>
<li>
<div>
<p>3333333333</p>
<p>4444444444</p>
</div>
</li>
<li>
<div>
<p>5555555555</p>
<p>6666666666</p>
</div>
</li>
<li>
<div>
<p>7777777777</p>
<p>8888888888</p>
</div>
</li>
<li>
<div>
<p>9999999999</p>
<p>aaaaaaaaaa</p>
</div>
</li>
<li>
<div>
<p>bbbbbbbbbb</p>
<p>cccccccccc</p>
</div>
</li>
</ul>
<ul id="ul2">
<li>
<div>
<p>1111111111</p>
<p>2222222222</p>
</div>
</li>
<li>
<div>
<p>3333333333</p>
<p>4444444444</p>
</div>
</li>
<li>
<div>
<p>5555555555</p>
<p>6666666666</p>
</div>
</li>
<li>
<div>
<p>7777777777</p>
<p>8888888888</p>
</div>
</li>
<li>
<div>
<p>9999999999</p>
<p>aaaaaaaaaa</p>
</div>
</li>
<li>
<div>
<p>bbbbbbbbbb</p>
<p>cccccccccc</p>
</div>
</li>
</ul>
</body>
</html>
