最近、ローリング ニュース エフェクトを実装したいと思い、インターネットでいくつかの情報を調べたところ、次の 2 つの基本的な実装方法があることがわかりました。
1. マーキータグを使用します。このタグの使用に関する比較的詳細な記事を転載しました。このタグの利点は、使いやすいことです。欠点は、IE8 や XHTML4 でも、徐々に使用されなくなっていることです。 .0 loose dtd は問題ありませんが、loose.dtd を削除することはできません。
2. div+javascript メソッドを使用します。この方法の利点は、ほぼすべてのブラウザと互換性があり、予測可能な期間内で安定して実行できることです。また、div を使用すると、Web ページで既存の CSS リソースを使用して、多くの素晴らしい効果を実現できます。欠点は、ある程度のプログラミング経験と忍耐力が必要なことです。
javascript+div を使用する基本原理は同じです。移動効果を実現するには、scrollTop 属性と offsettheight 属性を使用します。一般に、2 つの div が使用され、内部のコンテンツは同じであり、その後 2 つの div が結合されて連続ループ効果が形成されます。以下に私が見つけた 2 つのサンプル コードを示します。最初のコードはまさに私が使用したもので、動作します。 2番目のものはテストしませんでした。比較のためにこれを書いています。2 番目のコピーは Web サイトから取得したものなので使用できるはずです。
最初のコード
次のようにコードをコピーします。
<div id="layer1" style="overflow-y:hidden;width:120;">
<div id="layer2">
<%
ArrayList cancelList = DBTools.getView("select * from sys_announce order by pubdate DESC");
for (int i = 1; i < cancelList.size() && i < 5; i++) {
String アナウンス Arr[] = (String[]) アナウンスリスト.get(i);
文字列コンテンツ = cancelArr[1];
文字列日付 = 発表Arr[2].substring(発表Arr[2].indexOf("-")+1, 発表Arr[2].indexOf(" "));
%>
<table cellpacing="0" cellpadding="0">
<tr>
<td/>
</tr>
</テーブル>
<table cellpacing="0" cellpadding="0">
<tr>
<td valign="トップ">
<img vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
</td>
<td style="line-height: 20px;" mce_style="line-height: 20px;">
<%=content%> <%=date%>
</td>
<td></td>
</tr>
</テーブル>
<%
}
%>
</div>
<div id="layer3"></div>
</div>
<mce:script language="javascript"><!--
varlayerHeight = 100; // スクロール領域の高さを定義します。100
var iFrame = 1; // フレームごとに移動するピクセルを定義します。
var iFrequency = 50; // フレーム周波数を定義します。
var timer; // 時刻ハンドルを定義します。
if(document.getElementById("layer2").offsetHeight >= LayerHeight)
document.getElementById("layer1").style.height = レイヤー高さ;
それ以外
document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;
document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;
//alert(document.getElementById("layer2").innerHTML);
関数 move(){
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
}
それ以外 {
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>
2番目のコード
次のようにコードをコピーします。
<SCRIPT言語="JavaScript">
var strArray=新しい配列();
strArray[1]=''
+'<table width=136 border=0 cellpacing=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 target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">中国天然資源学会第６回全国会員大会及び学術年次総会のお知らせ（その２） (09.10 )</a></td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td高さ=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=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 target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">「適応型空間情報視覚化理論、技術および方法」に関するセミナー論文募集 (09.04)</a > </td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td高さ=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=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 target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">中国科学院地理科学天然資源研究所の会計職募集のお知らせ (09.03)< /a></td> </tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td高さ=6></td></tr></table>'
strArray[0]=''
+'<table width=136 border=0 cellpacing=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 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 cellpacing=0 cellpadding=0><tr><td高さ=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=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 target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009 年中国科学院地理情報技術独立イノベーション フォーラムおよび SuperMap GIS 技術カンファレンス (09.01)</a >< /td></tr></table><table width=43 border=0 cellpacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
+'<table width=136 border=0 cellpacing=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 target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">州立資源環境情報システム重点研究所は、「有限要素法」の方向で客員研究員を募集しています。 2009 年 (08.07 )</a></td></tr></table><table width=43 border=0 cellpacing=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;
*/
</スクリプト>
<スクリプト>
var タイマー;
document.write('<div id="icefable1">'
+'<テーブル幅=130; セルスペース=0 セルパディング=0>'
+'<tr><td width=130; style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+'</td></ tr>'
+'<tr><td width=130; style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+'</td></ tr>'
+'</テーブル>'
+'</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){
/*
スタイル.幅=0;
スタイル.高さ=マーキーの高さ;
style.overflowX="可視";
style.overflowY="非表示";
noWrap = true;
*/
onmouseover=function(){clearInterval(タイマー);};
onmouseout=function(){timer = setInterval("move()",100);};
}
/*
var preTop=0;
var currentTop=0;
var stoptime=0;
*/
関数 init_srolltext(){
Icefable2.innerHTML="";
Icefable2.innerHTML+=icefable1.innerHTML;
Icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
タイマー = setInterval("move()",100);
}
関数 move(){
if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1);
それ以外
ocument.getElementById("icefable2").scrollTop += 1;
}
init_srolltext();
関数scrollUp(){
if(stopscroll==true) 戻り値;
現在のトップ+=4;
if(currentTop==132)
{
停止時間+=4;
currentTop-=0;
}
それ以外 {
preTop=icefable1.scrollTop;
Icefable1.scrollTop+=4;
if(preTop==icefable1.scrollTop){
Icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=4;
}
}
}
//setTimeout("init_srolltext()",2000);
//init_srolltext();
</スクリプト>