JavaScriptを使用してニュースのスクロール効果を実現する（サンプルコード）_JavaScriptスキル

最近、ローリング ニュース エフェクトを実装したいと思い、インターネットでいくつかの情報を調べたところ、

の 2 つの基本的な実装方法があることがわかりました。

1. マーキータグを使用します。 このタグの使用法についての比較的詳しい記事を転載しました。このタグの利点は使いやすいことです。欠点は、多くのブラウザがこのタグをサポートしなくなったことです。 , IE8でもXHTML4.0のloose.dtdはOKですが、loose.dtdを削除するのはダメです。

2. div JavaScript メソッドを使用します。 この方法の利点は、ほぼすべてのブラウザと互換性があり、予測可能な時間内で安定して実行できることです。また、div を使用すると、Web ページで既存の CSS リソースを使用して、多くの素晴らしい効果を実現できます。欠点は、ある程度のプログラミング経験と忍耐力が必要なことです。

JavaScript div を使用する基本原理は同じです。移動効果を実現するには、scrollTop 属性と offsettheight 属性を使用します。一般に、2 つの div が使用され、内部のコンテンツは同じであり、その後 2 つの div が結合されて連続ループ効果が形成されます。以下に私が見つけた 2 つのサンプル コードを示します。最初のコードはまさに私が使用したもので、動作します。 2番目のものはテストしませんでした。比較のためにこれを書いています。2 番目のコピーは Web サイトから取得したものなので使用できるはずです。

最初のコード

コードをコピー コードは次のとおりです:

           

                                ArrayList announceList = DBTools.getView("select * from sys_announce order by pubdate DESC");
                for (int i = 1; i                     String announceArr[] = (String[]) announceList.get(i);
                    String content = announceArr[1];
                    String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" "));
                %>
                   
                       
                           
                       
                   
                   
                       
                           
                           
                           
                       
                   
                                }
                %>
           

           

iFrame = 1; // 各フレームで移動するピクセルを定義します。 ency = 50; // フレーム周波数を定義します。
var timer; // 時間ハンドルを定義します。 offsetHeight >= LayerHeight)
document.getElementById("layer1").style.height = getElementById ("layer2").offsetHeight;
function move(){
if( document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
document .getElementById("layer1 ").scrollTop -= (document.getElementById("layer2"). offsetHeight - iFrame);
rollTop = iFrame;

}
timer = setInterval("move()",iFrequency); document.getElementById ("layer1").onmouseout=function() { timer=setInterval("move()",iFrequency);}

// -->


2 番目のコード




コードをコピー


コードは次のとおりです:

 
        <script><BR> var timer;<br><br> document.write('<div id="icefable1" style="width:136;">'<BR> +'<table width=130; border=0 cellspacing=0 cellpadding=0>'<BR> +'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+''<BR> +'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+''<BR> +''<BR> +'</script>

'
                +'

');
/*
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.innerHTMLicefable2.innerHTML;
timer = setInterval("move()",100);
}
関数移動(){
if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
document.getElementById("icefable2").scrollTop -=メント。 getElementById("icefable1").offsetHeight - 1);
else
ocument.getElementById("icefable2").scrollTop = 1;
}
init_srolltext();

関数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();