js原生实现百叶窗上下滚动

直接上代码

* {
			margin: 0;
			padding: 0;
		}
		#uli {
			width:250px;
			height:auto;
			float:left;
			border-top: 1px solid #000;
			margin:20px;
		}
		li {
			list-style: none;
			width: 100%;
			height: 30px;
			line-height:30px;
			overflow:hidden;
			position:relative;
			border-bottom:1px solid #333;
		}
		li div {
			position:absolute;
			top:-30px;
		}
		li div p {
			height: 30px;
			letter-spacing:5px;
		}

<ul id="uli">
		<li>
			<div>
				<p>111</p>
				<p>222</p>
				<p>aaa</p>
				<p>bbb</p>
			</div>
		</li>
		<li>
			<div>
				<p>333</p>
				<p>444</p>
			</div>
		</li>
		<li>
			<div>
				<p>555</p>
				<p>666</p>
			</div>
		</li>
		<li>
			<div>
				<p>777</p>
				<p>888</p>
			</div>
		</li>
	</ul>

function startMove(obj,json,endFn){
			clearInterval(obj.timer)
			obj.timer = setInterval(function(){
				var bBtn = true;
				for(var attr in json){
					var iCur = 0;
					if(attr == "opacity"){
						if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
							iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
						}else{
							iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
						}
					}else{
						iCur = parseInt(getStyle(obj,attr)) || 0;
					}
					var iSpeed = (json[attr]-iCur)/8;
					iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
					if (iCur!=json[attr]) {
						bBtn = false;
					}
					if(attr =='opacity'){
						obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+')';
						obj.style.opacity = (iCur + iSpeed)/100;
					}else{
						obj.style[attr] = iCur + iSpeed + "px";
					}
				}
				if(bBtn){
					clearInterval(obj.timer);
					if(endFn){
						endFn,call(obj);
					}
				}
			},30);	
		}
		function getStyle(obj,attr){
			if (obj.currentStyle) {
				return obj.currentStyle[attr];
			}else{
				return getComputedStyle(obj,false)[attr];
			}
		}
		window.onload = function(){
			var uli = document.getElementById('uli');
			toShow(uli);
			function toShow(obj){
				var adiv = document.getElementsByTagName('div');
				var inow = 0;
				var time = null;
				var btn = true;
				setInterval(function(){
					toChange();
				},1000);
				function toChange(){
					timer = setInterval(function(){
						if(inow == adiv.length){
							clearInterval(timer);
							inow = 0;
							btn=!btn;
						}else if(btn){
							startMove(adiv[inow],{top:0});
							inow++;
						}else{
							startMove(adiv[inow],{top:-30});
							inow++;
						}
					},100);
				}
			}
		}