ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してニュースのスクロール効果を実現する（サンプルコード）_JavaScriptスキル

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

WBOYオリジナル: 2016-05-16 17:12:241154ブラウズ

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

の 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 < 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(" "));
%>

<%=content%> <%=date%>

<%
}
%>

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 番目のコード

コードをコピー

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