JS テキスト スクロール効果_JavaScript スキルの簡単な分析

この効果が将来の Web 開発で一般的に使用されるかどうか、またはそれが依然としてデザイナーに好まれているかどうかは、技術的な観点から最も重要ではありません。その実装原理を理解することは、独自のフロントエンド テクノロジの改善に大きな影響を及ぼします。起源がなければ世界は決して変わりません。その動作ルールをマスターすれば、そのルールをマスターすることを前提として、関連するテクノロジーを使用して新しいエフェクトを作成することもできます。その実装プロセスを見てみましょう:
1.html

コードをコピー コードは次のとおりです。以下のように:

;1 行目

2 行目

2.css
>
コードをコピーします

コードは次のとおりです。 .box{ width:150px>height:25px;行の高さ:25px;

border:#bbb 1px ソリッド;

overflow:hidden;
.box ul{margin:0}
.box li{ 🎜>高さ:25px;
フォントサイズ:12px;
リストスタイルタイプ:なし; >


3.js





コードをコピー


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

function startmarquee(lh,speed,lay,index){ /*
関数 startmarquee のパラメータ:

lh: 一度に上にスクロールするテキストの距離または高さ。 speed: スクロール速度; lay: スクロールの一時停止の時間間隔; index: カプセル化された関数はページ上のさまざまな要素に適用できます。 🎜>var p=false; var o=document.getElementById("marqueebox"index); //ドキュメント内のスクロール領域オブジェクトを取得し、変数 o.innerHTML = o.innerHTML; // オブジェクト内の実際のコンテンツは、2 つの ul を含むコピーを作成したものです。コピーの目的は、テキストのトランジションを提供することです。途切れることなく上にスクロールします。 o.onmouseover=function(){p=true}

//マウスがスライドしてスクロールを停止します。

o.onmouseout=function(){p=false}
//マウス葉、スクロールを開始します。p が true か false かは、以下の start() 関数の実行に直接影響します。
o.scrollTop = 0;スクロール領域、初期値は 0;
function start(){
t=setInterval(scrolling,speed); //setInterval は大きい方のスクロール関数を実行します。速度、スクロール時間間隔が長くなり、スクロール速度が遅くなります。
if(!p){ o.scrollTop = 1;}
//渡されたブール値に応じて、スクロールが停止または開始されます。 p;
}
functionscrolling(){
if(o.scrollTop%lh!=0){
//割り切れない場合、つまり 1 回の上向きの動きの高さは割り切れないlh に到達しない場合、コンテンツは上方向にスクロールし続けます。
o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;オブジェクト o は以前に一度コピーされているため、そのスクロールの高さは実際には元のコンテンツの高さの 2 倍になります。
コンテンツがscrollHeight/2 の高さまでスクロールすると、テキストの 3 行すべてが 1 回表示され、全体が表示されます。 content
scrollTop は 0 に戻ります; 次のスクロールがテキストに到達するまで待ちます。
}else{
clearInterval(t)>//それ以外の場合は t をクリアします。スクロールを一時停止します
setTimeout(start,lay);
//遅延期間の後、start() を開始してスクロールを続けます
}
}
setTimeout(start,lay); >//初めてスクロールを開始します; setTimeout は一定時間後に関数 start() を実行しますが、一度だけ実行されます
}
//パラメータを渡します
startmarquee(25,30,3000) ,0);
//一時停止効果あり
startmarquee(25,40,0,1 );
//連続


以下はすべてコードです:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title>