利用JavaScript實現(xiàn)新聞滾動效果(實例代碼)
最近要實現(xiàn)一個滾動新聞效果，在網(wǎng)上查了一些資料，發(fā)現(xiàn)基本的實現(xiàn)方法有兩種：
1.使用Marquee標(biāo)簽。這個標(biāo)簽的使用我已經(jīng)轉(zhuǎn)載了一篇比較詳細的文章，這個標(biāo)簽的優(yōu)點是便于使用，缺點是人們已經(jīng)逐漸不適用它了，許多瀏覽器不支持，甚至在IE8想，XHTML4.0的loose.dtd是可以的，而去掉loose.dtd卻不行。
2.使用div+javascript的方法。這種方法的好處是可以兼容幾乎所有的瀏覽器，并且在可以預(yù)料的時間內(nèi)仍能穩(wěn)定運行。并且使用div使得網(wǎng)頁可以利用現(xiàn)有的css資源實現(xiàn)很多炫目的效果。缺點是需要一定的編程經(jīng)驗和耐心。
使用javascript+div方式的基本原理是一樣的，利用scrollTop屬性和offsetheight屬性來實現(xiàn)移動效果。一般使用兩個div，里面的內(nèi)容是一樣的，然后利用兩個div拼接，形成不斷循環(huán)的效果。下面是我找到的兩份示例代碼，第一份正是我用的代碼，可以運行。第二份我沒做測試。寫出來是為了做個對比，第二份應(yīng)該是能用的，因為那是我從網(wǎng)站上摘下來的。
第一份代碼
<div id="layer1" style="overflow-y:hidden;width:120;">
<div id="layer2">
<%
ArrayList announceList = DBTools.getView("select * from sys_announce order by pubdate DESC");
for (int i = 1; i < announceList.size() && i < 5; i++) {
String announceArr[] = (String[]) announceList.get(i);
String content = announceArr[1];
String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" "));
%>
<table cellspacing="0" cellpadding="0" border="0" width="43">
<tr>
<td height="10"/>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="136">
<tr>
<td height="20" width="16" valign="top">
<img height="12" width="12" vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
</td>
<td width="108" style="line-height: 20px;" mce_style="line-height: 20px;">
<%=content%> <%=date%>
</td>
<td></td>
</tr>
</table>
<%
}
%>
</div>
<div id="layer3"></div>
</div>
<mce:script language="javascript"><!--
var layerHeight = 100; // 定義滾動區(qū)域的高度.100
var iFrame = 1; // 定義每幀移動的象素.
var iFrequency = 50; // 定義幀頻率.
var timer; // 定義時間句柄.
if(document.getElementById("layer2").offsetHeight >= layerHeight)
document.getElementById("layer1").style.height = layerHeight;
else
document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;
document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;
// alert(document.getElementById("layer2").innerHTML);
function move(){
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
}
else {
document.getElementById("layer1").scrollTop += iFrame;
}
}
timer = setInterval("move()",iFrequency);
document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
// --></mce:script>
第二份代碼
<SCRIPT language="JavaScript">
var strArray=new Array();
strArray[1]=''
+'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="中國自然資源學(xué)會第六次全國會員代表大會暨學(xué)術(shù)年會通知（第2號）（09.10）" target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">中國自然資源學(xué)會第六次全國會員代表大會暨學(xué)術(shù)年會通知（第2號）（09.10）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="“自適應(yīng)空間信息可視化理論、技術(shù)與方法”研討會征文通知（09.04）" target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">“自適應(yīng)空間信息可視化理論、技術(shù)與方法”研討會征文通知（09.04）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="中國科學(xué)院地理科學(xué)與資源研究所會計崗位招聘啟事（09.03）" target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">中國科學(xué)院地理科學(xué)與資源研究所會計崗位招聘啟事（09.03）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
strArray[0]=''
+'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="水問題論壇系列講座——2009年第7講（總第90講）（09.01）" target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">水問題論壇系列講座——2009年第7講（總第90講）（09.01）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="2009'中國科學(xué)院地理信息技術(shù)自主創(chuàng)新論壇暨SuperMap GIS技術(shù)大會（09.01）" target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009'中國科學(xué)院地理信息技術(shù)自主創(chuàng)新論壇暨SuperMap GIS技術(shù)大會（09.01）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="資源與環(huán)境信息系統(tǒng)國家重點實驗室2009年招聘“有限元法”方向客座研究人員（08.07）" target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">資源與環(huán)境信息系統(tǒng)國家重點實驗室2009年招聘“有限元法”方向客座研究人員（08.07）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
/*
showId=Math.floor(Math.random()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
</SCRIPT>
<SCRIPT>
var timer;
document.write('<div id="icefable1" style="width:136;">'
+'<table width=130; border=0 cellspacing=0 cellpadding=0>'
+'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+'</td></tr>'
+'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+'</td></tr>'
+'</table>'
+'</div>'
+'<div id="icefable2" style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>');
/*
var marqueesHeight=132;
var stopscroll=false;
icefable1.scrollTop=0;
*/
with(icefable1){
/*
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
*/
onmouseover=function(){clearInterval(timer);};
onmouseout=function(){timer = setInterval("move()",100);};
}
/*
var preTop=0;
var currentTop=0;
var stoptime=0;
*/
function init_srolltext(){
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
timer = setInterval("move()",100);
}
function move(){
if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1);
else
ocument.getElementById("icefable2").scrollTop += 1;
}
init_srolltext();
function scrollUp(){
if(stopscroll==true) return;
currentTop+=4;
if(currentTop==132)
{
stoptime+=4;
currentTop-=0;
}
else {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=4;
if(preTop==icefable1.scrollTop){
icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=4;
}
}
}
//setTimeout("init_srolltext()",2000);
//init_srolltext();
</SCRIPT>
相關(guān)文章
遮照層效果實現(xiàn)代碼。2009-09-09
這是寫好的例子可以測試一下就明白了，有需要的朋友可以參考一下2013-11-11
Firefox 無法獲取cssRules 的解決辦法...2006-10-10
接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應(yīng)該是抽象的，需要由具體的類去實現(xiàn)，然后第三方就可以通過這組抽象方法調(diào)用，讓具體的類執(zhí)行具體的方法2022-10-10
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)
這篇文章主要介紹了JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)習(xí)筆記，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
avaScript 中的 this 關(guān)鍵字，深入淺出的分析其在不同情況下的含義，形成這種情況的原因以及 Dojo 等 JavaScript 工具中提供的綁定 this 的方法?？梢赃@樣說，正確掌握了 JavaScript 中的 this 關(guān)鍵字，才算邁入了 JavaScript 這門語言的門檻。2014-12-12
這篇文章主要為大家詳細介紹了JS canvas實現(xiàn)畫板和簽字板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章介紹了js單例模式的兩種方案，有需要的朋友可以參考一下2013-10-10
基于dropdown.js實現(xiàn)的兩款美觀大氣的二級導(dǎo)航菜單
這篇文章主要介紹了基于dropdown.js實現(xiàn)的兩款美觀大氣的二級導(dǎo)航菜單,通過調(diào)用js插件實現(xiàn)導(dǎo)航效果,非常簡單實用,需要的朋友可以參考下2015-09-09
javascript每日必學(xué)之條件分支，本文的主要內(nèi)容就是介紹的邏輯條件分支，循環(huán)，感興趣的小伙伴們可以參考一下2016-02-02