百叶窗加载效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
         #ula{
         	width:200px;
         	height: 400px;
         	margin: 0;
         }
         #ula li{
            position: relative;
            width: 100%;
            height: 40px;
            list-style: none;
            overflow: hidden;
            border: 1px solid red;
         }
          #ula li div{
             width: 100%;
             height: 80px;
             position: absolute;
             left: 0;
             top:0px;
             transition: 0.5s;
             transform: translateY(-75px);
          }
          #ula li div p{
          	width: 100%;
          	height: 40px;
          	text-align: center;
          	line-height: 40px;
          }
	</style>
</head>
<body>
<ul id="ula">
	<li>
		<div>
			<p>111111111111</p>
			<p>aaaaaaaaaaaa</p>
		</div>
	</li>
	<li>
		<div>
			<p>222222222222</p>
			<p>bbbbbbbbbbbb</p>
		</div>
	</li>
	<li>
		<div>
			<p>333333333333</p>
			<p>cccccccccccc</p>
		</div>
	</li>
	<li>
		<div>
			<p>444444444444</p>
			<p>dddddddddddd</p>
		</div>
	</li>
	<li>
		<div>
			<p>555555555555</p>
			<p>eeeeeeeeeeee</p>
		</div>
	</li>
	<li>
		<div>
			<p>666666666666</p>
			<p>ffffffffffff</p>
		</div>
	</li>
	<li>
		<div>
			<p>777777777777</p>
			<p>gggggggggggg</p>
		</div>
	</li>
	<li>
		<div>
			<p>888888888888</p>
			<p>hhhhhhhhhhhh</p>
		</div>
	</li>
	<li>
		<div>
			<p>9999999999999</p>
			<p>iiiiiiiiiiiii</p>
		</div>
	</li>
</ul>

	<script type="text/javascript">
		var ula = document.getElementById('ula');
		var n = 0;
		var timer = null;
		var onOff = true;
		show(ula);
		function show(obj){
			var divs = obj.getElementsByTagName('div');
			setInterval(function(){
				change();
			},5000);
			function change(){
				timer = setInterval(function(){
					
					if(n==divs.length){
						clearInterval(timer);
						n=0;
						onOff = !onOff;
					}else{
						divs[n].style.transform = 'translateY('+(onOff?-20:-70)+'px)';
						n++;
					}
				},200);
			};
		}
	</script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 百叶窗加载效果

赞 (1)
分享到:更多 ()

发表评论 0