Jquery 仿新浪首页信息滚动效果2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>jQuery仿新浪微博动态效果</title>
<style type="text/css">
.dongtai {background:#f6f6f6; width:700px;border:1px solid #e2e2e2;height:200px;}
.dongtai .tit { border-bottom:1px solid #ddd;text-indent:20px;background:#c3c3b3;height:40px; line-height:40px;color:#b5c;}
ul {display:block; padding:10px 10px 0; overflow:hidden; position:relative; top:10px;}
ul li {display:block; height:50px; border-bottom:1px dashed #808080; background:#f6f6f6 left top no-repeat; padding-top:3px; margin-bottom:10px; *margin-bottom:5px;}
.con {margin:20px;}
.con .dongtai {margin:10px 0px;}
</style>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js '></script>
<script type="text/javascript">
var arr = new Array();
arr['0'] = '【小猪】：大家好！';
arr['1'] = '【小牛】：在这里大家可以互相分享技术心得。';
arr['2'] = '【小狗】：认识大家很高兴啊！';
var qu = arr.length-1;
window.onload = function(){
put();
}
function put(){
var str = '' ;
for(var i=qu;i<arr.length;i++){
str += '<li>'+arr[i]+'</li>';
}
$('#k').html(str);
qu--;
setInterval('show()',3000);
}
function suan(){
if(qu<=0){
qu = arr.length-1;
}else{
qu --;
}
}
// 动画主函数
function show(){
$('#k li:first').before('<li style="display:none;">'+arr[qu]+'</li>');
$('#k li:first').slideDown(500);
$('#k li:last').animate({ opacity:"0",marginTop:"0"},500,'',function(){$('#k li:last').remove();});
suan();
}
</script>
</head>
<body>
<div class="con">
<div class="info">
<h1>jQuery仿新浪微博滚动效果</h1>
</div>
<div class='dongtai'>
<div class='tit'><h3>最新动态</h3></div>
<ul id="k">
加载中...
</ul>
</div>
</div>
</body>
</html>