新浪微博的滚动效果，通过JavaScript也能实现，但感觉用JavaScript写这个效果极其麻烦。使用jQuery只需要几行代码就能轻松实现。
首先我们分析下动画原理，微博上的滚动效果主要有两步：滑出，渐变。
首先是滑出
在jQuery中，要使某个标签滑入滑出可以使用slideDown()与sildeUp()函数，分别是向下向上滑动。我们先来实现滑动效果
<!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">
.list {background:#f6f6f6; width:700px;border:1px solid #e2e2e2;height:200px;}
.list .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 .list {margin:10px 0px;}
</style>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.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 calculate(){
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();});
calculate();
}
</script>
</head>
<body>
<div class="con">
<div class="info">
<h1>jQuery滚动效果</h1>
</div>
<div class='list'>
<div class='tit'><h3>最新动态</h3></div>
<ul id="k">
加载中...
</ul>
</div>
</div>
</body>
</html>
