基于jquery的內容循環滾動小模塊（仿新浪微博未登錄首頁滾動微博顯示）

2019-11-20 23:53:22

字體：大中小

來源：轉載

供稿：網友

從需求上來說，這個功能需要實時調用最新的微博數據，單就前端開發來說，其需求可以拆分如下：
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體驗降級*/} 

復制代碼代碼如下:

 
<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> 