快捷導(dǎo)航

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

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

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

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

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

 
<div class="messagewrap"> 
<ul> 
<li><!--多個(gè)li，請(qǐng)自行復(fù)制或者設(shè)置重復(fù)區(qū)域--></li> 
</ul> 
<div class="bottomcover"> 
<!--為了符合w3c要求不能有空標(biāo)簽的要求，此處可選擇寫(xiě)一個(gè)&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;/*針對(duì)IE6體驗(yàn)降級(jí)*/} 

JS

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

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