ディレクトリスクロール効果を実現するネイティブJS

これはネイティブ JS で実装されたテキストスクロール効果です。この効果は通常、ニュース、ダイナミクス、再充電記録などのローカル情報を Web ページに表示するために使用されます。効果は次のとおりです。

実装コードは次のとおりです。

<!DOCTYPE html>
<html>
 
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
    <title>ディレクトリのスクロール効果を実現するネイティブ JS</title>
    <スタイル>
        体 {
            フォントサイズ: 12px;
            行の高さ: 24px;
            テキスト配置: 中央;
        }
 
        * {
            マージン: 0px;
            パディング: 0px;
        }
 
        ul {
            リストスタイル: なし;
        }
 
        画像 {
            境界線: なし;
        }
 
        {
            色: #333;
            テキスト装飾: なし;
        }
 
        ホバー{
            色: #ff0000;
        }
 
        #mooc {
            幅: 399ピクセル;
            境界線: 5px 実線 #ababab;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            境界線の半径: 15px;
            ボックスの影: 2px 2px 10px #ababab;
            マージン: 50px 自動 0;
            テキスト配置: 左;
        }
 
        #moocタイトル{
            高さ: 62px;
            オーバーフロー: 非表示;
            フォントサイズ: 26px;
            行の高さ: 62px;
            左パディング: 30px;
            /* ファイアフォックス */
            背景画像: -moz-linear-gradient(上、#f05e6f、#c9394a);
            /* Saf4+、Chrome */
            背景画像: -webkit-gradient(linear、左上、左下、カラーストップ(0、#f05e6f)、カラーストップ(1、#c9394a));
            /* つまり*/
            フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0');
            境界線: 1px 実線 ##f05e6f;
            /* Gecko ブラウザ */
            境界線の半径: 8px 8px 0 0;
            /* Webkit ブラウザ */
            -webkit-border-radius: 8px 8px 0 0;
            境界線の半径: 8px 8px 0 0;
            色: #fff;
            位置: 相対的;
        }
 
        #moocタイトル{
            位置: 絶対;
            右: 10px;
            下: 10px;
            表示: インライン;
            色: #fff;
            フォントサイズ: 12px;
            行の高さ: 24px;
        }
 
        #moocボット{
            幅: 399ピクセル;
            高さ: 10px;
            オーバーフロー: 非表示;
        }
 
        #moocボックス{
            高さ: 144px;
            幅: 335ピクセル;
            左マージン: 25px;
            上マージン: 10px;
            オーバーフロー: 非表示;
        }
 
        #mooc ul li {
            高さ: 24px;
        }
 
        #mooc ul li a {
            幅: 180ピクセル;
            フロート: 左;
            表示: ブロック;
            オーバーフロー: 非表示;
            テキストインデント: 15px;
            高さ: 24px;
        }
 
        #mooc ul li span {
            フロート: 右;
            色: #999;
        }
    </スタイル>
</head>
 
<本文>
    <div id="mooc">
        <h3 id="moocTitle">
            最新のコース<a href="#" target="_self">詳細>></a>
        </h3>
 
        <div id="moocBox">
            <ul id="con1">
                <li>
                    <a href="#" >1. 絶対的な敗者の反撃</a>
                    2013-09-18
                </li>
                <li>
                    <a href="#" >2. タブページ切り替え効果</a>
                    2013-10-09
                </li>
                <li>
                    <a href="#" >3. 丸いクリスタルボタンを作る</a>
                    2013-10-21
                </li>
                <li>
                    <a href="#" >4. HTML+CSS 基礎コース</a>
                    2013-11-01
                </li>
                <li>
                    <a href="#" >5. ページ番号を作成する</a>
                    2013-11-06
                </li>
                <li>
                    <a href="#" >6. ナビゲーション メニューの作成</a>
                    2013-11-08
                </li>
                <li>
                    <a href="#" >7. 情報リストの作成</a>
                    2013-11-15
                </li>
                <li>
                    <a href="#" >8. ドロップダウン メニューを作成する</a>
                    2013-11-22
                </li>
                <li>
                    <a href="#" >9. 「初心者ガイド」効果を実現する方法</a>
                    2013-12-06
                </li>
            </ul>
            <ul id="con2"></ul>
        </div>
    </div>
    <script type="text/javascript">
        //スクロール リスト コンテナーを取得します。var area = document.getElementById('moocBox');
        //リスト1を取得
        var con1 = document.getElementById('con1');
        //空のリスト2を取得
        var con2 = document.getElementById('con2');
        //タイマー実行時間間隔を設定します。var speed = 50;
 
        //スクロールアップ変数を設定します。area.scrollTop = 0;
 
        //リスト1の内容をリスト2にコピーする
        con2 の内側の HTML を = con1 の内側の HTML に変換します。
 
        // 上へスクロールする関数 function scrollUp() {
            //スクロールリストのスクロール高さがリスト自体の高さ以上の場合 if (area.scrollTop >= con1.scrollHeight) {
                // リストのスクロール高さをゼロにリセットし、再度スクロールを開始します。area.scrollTop = 0;
                //それ以外の場合} else {
                //スクロールを続行します area.scrollTop++;
            }
        }
 
        //タイマーを保存 var myScroll = setInterval("scrollUp()", speed);
 
        //マウスが移動したら、タイマー領域をクリアします。onmouseover = function () {
            スクロール間隔をクリアします。
        }
        //マウスが離れたらタイマーを開始します area.onmouseout = function () {
            myScroll = setInterval("scrollUp()", 速度);
        }
    </スクリプト>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: