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

WBOY
リリース: 2016-05-16 18:26:27
オリジナル
1156 人が閲覧しました

この効果が将来の 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 );
    //連続


    以下はすべてコードです:
    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!