<!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 » 百叶窗加载效果
前端ABC