從需求上來說，這個功能需要實時調用最新的微博數據，單就前端開發來說，其需求可以拆分如下：
1 內容持續滾動；
2 新微博將下面的微博先推下去，然後淡入進來；
3 鼠標經過內容暫停滾動；
4 容器底部漸變消失在背景色下。
上述4個需求之中，需求1-3為js技術實現，需求4為css技術實現，下面逐個需求來講。
需求1和需求2：內容持續滾動的需求有些類似前一篇文章《小模塊：公告滾動並暫停》中介紹的功能，在那篇文章中，此功能使用css的position定位來控制整個ul列表的移動動畫。結合需求2，我們可以寫得更簡單一些，讓最後的li元素定時插入第一個li元素的上方，然後采用animate方法來改變li的高度和透明效果。而不停頓的滾動依然要用到setTimeout方法。在沒有新數據加載的情況下，要實現有限內容循環滾動。
需求3：鼠標經過暫停的需求可以當鼠標hover經過的時候在某元素上加上某屬性的值，這裡采用name屬性——判斷此值是否存在，如果存在則不執行代碼。
需求4：可以通過在內容上覆蓋漸變的png24圖片來實現，IE6對png24支持不好，如果需要顧及性能的話，在此容器上加display:none的IE6hack。接下來的問題是解決圖片覆蓋到文字之上，文字如何可以點擊或選中的問題，這時候需要一個特殊的css屬性“pointer-events”，此屬性的值設為none之後，鼠標就可以透過絕對定位在文字上的圖片選中下面的文字。
綜合代碼如下：
HTML
代碼如下:
<div class="messagewrap">
<ul>
<li><!--多個li，請自行復制或者設置重復區域--></li>
</ul>
<div class="bottomcover">
<!--為了符合w3c要求不能有空標簽的要求，此處可選擇寫一個 -->
</div>
</div>
CSS
代碼如下:
.messagewrap{overflow:hidden;position:relative;width:500px;height:300px}
li{height:50px;}
.bottomcover{width:500px;height:45px;position:absolute;bottom:0;left:0;
pointer-events:none;background:url(halftransp.png) left bottom no-repeat;
/*某從背景色向上漸變透明圖片*/ _display:none;/*針對IE6體驗降級*/}
JS
代碼如下:
<script>
$(function(){
msgmove();
$("ul").hover(function(){
$(this).attr("name","hovered"); //鼠標經過設置ul的name值為"hovered"
},function(){
$(this).removeAttr("name");
});
});
function msgmove(){
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
if($("ul").attr("name") != "hovered"){
//判斷ul的name屬性是否為"hovered"，決定下面代碼塊是否運行，以實現鼠標經過暫停滾動。
var height = $("li:last").height();
if(isIE6){
//判斷IE6，jQuery的animate動畫和opacity透明在一起使用在IE6中會出現中文重影現象，
//所以在ie6中實行透明的禁用。
$("li:last").css({"height":0});
}else{
$("li:last").css({"opacity":0,"height":0});
//列表最後的li透明和高度設置為0
}
$("li:first").before($("li:last"));
//把列表最後的li提升到頂部，實現有限列表項無限循環滾動顯示
$("li:first").animate({"height":height},300);
//列表頂部的li高度逐漸變高以把下面的li推下去
if(!isIE6){
$("li:first").animate({"opacity":"1"},300);
//在非IE6浏覽器中設置透明淡入效果
}
}
setTimeout("msgmove()",5000);
//設置5秒滾動一次
}
</script>