JS テキストスクロール効果_JavaScript スキルの簡単な分析-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:26:27

オリジナル

1163 人が閲覧しました

この効果が将来の 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>