文字竖直方向的滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
li{
height: 60px;
color: saddlebrown;
font-size: 30px;
line-height: 60px;
padding: 0 3%;
/*background: aquamarine;*/
border-radius: 50px;
}
ul{
height: 60px;
display: block;
border-bottom: 1px solid gray;
margin-top: 30px;
}
.li li{
display: none;
}
.li li:first-child{
display: block;
}
h1{
z-index: 2;
width: 100%;
background: white;
position: fixed;
top: 0;
/*margin-bottom: 30px;*/
}
</style>
</head>
<body>
<h1>shanghua</h1>
<ul class="li">
<li >恭喜你中奖了</li>
</ul>
</body>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var i=0;
setInterval(function(){
var newobj = $('<li>恭喜你中奖了'+i+'</li>');
$('.li').append(newobj);
$('li:eq('+i+')').show();
$('li:eq('+i+')').siblings().hide();
$('li:eq('+i+')').animate({
'margin-top':'-60px'
},2000)
i++;
},2000)
// for(var i=0;i<5;i++){
// var newobj = $('<li>恭喜你中奖了'+i+'</li>');
// $('.li').append(newobj);
// }
// var linum = $('li').length;
// var i=0;
// var timeflag = setInterval(function(){
// if(i<linum-1){
// $('li:eq('+i+')').show();
// $('li:eq('+i+')').animate({
// 'margin-top':'-60px'
// },1000)
//// $('li:eq('+i+')').animate({
//// top:'0.5rem',
//// opacity:0.1
//// },10)
//// $('li:eq('+i+')').fadeIn(1000);
// $('li:eq('+i+')').siblings().hide();
//// $('li:eq('+i+')').css('display','block');
//// $('li:eq('+i+')').siblings().css('display','none');
// i++;
// }else if(i==linum-1){
// $('li:eq('+i+')').show();
// $('li:eq('+i+')').animate({
// 'margin-top':'-60px'
// },1000)
//// $('li:eq('+i+')').slideUp(1000);
// $('li:eq('+i+')').siblings().hide();
//// $('li:eq('+i+')').slideUp();
//// $('li:eq('+i+')').css('display','block');
//// $('li:eq('+i+')').siblings().css('display','none');
// i=0;
// }
// },1000)
//
})
</script>
</html>
