快捷導(dǎo)航

基于jquery的內(nèi)容循環(huán)滾動小模塊（仿新浪微博未登錄首頁滾動微博顯示）

更新時間：2011年03月28日 22:38:19 作者：

新浪微博未登錄首頁有一個“大家正在說”的模塊，動態(tài)滾動最新發(fā)布的微博。

從需求上來說，這個功能需要實時調(diào)用最新的微博數(shù)據(jù)，單就前端開發(fā)來說，其需求可以拆分如下：
1 內(nèi)容持續(xù)滾動；
2 新微博將下面的微博先推下去，然后淡入進(jìn)來；
3 鼠標(biāo)經(jīng)過內(nèi)容暫停滾動；
4 容器底部漸變消失在背景色下。
上述4個需求之中，需求1-3為js技術(shù)實現(xiàn)，需求4為css技術(shù)實現(xiàn)，下面逐個需求來講。
需求1和需求2：內(nèi)容持續(xù)滾動的需求有些類似前一篇文章《小模塊：公告滾動并暫停》中介紹的功能，在那篇文章中，此功能使用css的position定位來控制整個ul列表的移動動畫。結(jié)合需求2，我們可以寫得更簡單一些，讓最后的li元素定時插入第一個li元素的上方，然后采用animate方法來改變li的高度和透明效果。而不停頓的滾動依然要用到setTimeout方法。在沒有新數(shù)據(jù)加載的情況下，要實現(xiàn)有限內(nèi)容循環(huán)滾動。
需求3：鼠標(biāo)經(jīng)過暫停的需求可以當(dāng)鼠標(biāo)hover經(jīng)過的時候在某元素上加上某屬性的值，這里采用name屬性——判斷此值是否存在，如果存在則不執(zhí)行代碼。
需求4：可以通過在內(nèi)容上覆蓋漸變的png24圖片來實現(xiàn)，IE6對png24支持不好，如果需要顧及性能的話，在此容器上加display:none的IE6hack。接下來的問題是解決圖片覆蓋到文字之上，文字如何可以點擊或選中的問題，這時候需要一個特殊的css屬性“pointer-events”，此屬性的值設(shè)為none之后，鼠標(biāo)就可以透過絕對定位在文字上的圖片選中下面的文字。
綜合代碼如下：
HTML

復(fù)制代碼代碼如下:

 
<div class="messagewrap"> 
<ul> 
<li><!--多個li，請自行復(fù)制或者設(shè)置重復(fù)區(qū)域--></li> 
</ul> 
<div class="bottomcover"> 
<!--為了符合w3c要求不能有空標(biāo)簽的要求，此處可選擇寫一個&nbsp;--> 
</div> 
</div> 

CSS

復(fù)制代碼代碼如下:

 
.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

復(fù)制代碼代碼如下:

 
<script> 
$(function(){ 
msgmove(); 
$("ul").hover(function(){ 
$(this).attr("name","hovered"); //鼠標(biāo)經(jīng)過設(shè)置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"，決定下面代碼塊是否運行，以實現(xiàn)鼠標(biāo)經(jīng)過暫停滾動。 
var height = $("li:last").height(); 
if(isIE6){ 
//判斷IE6，jQuery的animate動畫和opacity透明在一起使用在IE6中會出現(xiàn)中文重影現(xiàn)象， 
//所以在ie6中實行透明的禁用。 
$("li:last").css({"height":0}); 
}else{ 
$("li:last").css({"opacity":0,"height":0}); 
//列表最后的li透明和高度設(shè)置為0 
} 
$("li:first").before($("li:last")); 
//把列表最后的li提升到頂部，實現(xiàn)有限列表項無限循環(huán)滾動顯示 
$("li:first").animate({"height":height},300); 
//列表頂部的li高度逐漸變高以把下面的li推下去 
if(!isIE6){ 
$("li:first").animate({"opacity":"1"},300); 
//在非IE6瀏覽器中設(shè)置透明淡入效果 
} 
} 
setTimeout("msgmove()",5000); 
//設(shè)置5秒滾動一次 
} 
</script> 