ブラインドの特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。

コードの実装は以下のとおりです。コピーして貼り付けてください。

<!DOCTYPE html>
<html>
 
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
    <title>ブラインドの特殊効果を実現するネイティブ JS</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
 
        li {
            リストスタイル: なし;
        }
 
        {
            テキスト装飾: なし;
        }
 
        ＃箱 {
            幅: 562ピクセル;
            パディング: 10px 24px 20px;
            背景: #EACFCF;
            オーバーフロー: 非表示;
            マージン: 20px 自動 0;
        }
 
        。左 {
            幅: 266ピクセル;
            フロート: 左;
        }
 
        。右 {
            幅: 266ピクセル;
            フロート: 右;
        }
 
        #ボックス h2 {
            高さ: 38px;
            下境界線: 1px 実線 #D2A1A1;
            左パディング: 20px;
        }
 
        #ボックス h2 強い {
            フロート: 左;
            行の高さ: 38px;
            色: #885050;
            フォントの太さ: 標準;
        }
 
        #ボックス h2 a {
            フロート: 右;
            幅: 52px;
            高さ: 14px;
            フォントサイズ: 12px;
            テキストインデント: 10px;
            色: #fff;
            行の高さ: 12px;
            フォントの太さ: 標準;
            上マージン: 10px;
        }
 
        #ボックスli {
            高さ: 30px;
            位置: 相対的;
            下境界線: 1px 破線 #D1A1A1;
        }
 
        #ボックス li div、
        #ボックスリップ{
            高さ: 30px;
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 100%;
        }
 
        #ボックスリップ{
            背景: #fff;
            不透明度: 0;
            フィルター:アルファ(不透明度=0);
        }
 
        #ボックス li div a,
        #ボックス li div span {
            行の高さ: 30px;
            フォントサイズ: 12px;
            高さ: 30px;
        }
 
        #ボックス li div a {
            フロート: 左;
            左パディング: 20px;
            色: #7F5454;
            幅: 172ピクセル;
            オーバーフロー: 非表示;
        }
 
        #ボックス li div span {
            右パディング: 10px;
            フロート: 右;
            色: #CF9494;
        }
    </スタイル>
    <script type="text/javascript">
        window.onload = 関数（）{
            var oBox = document.getElementById("box");
            タグ名によって要素を取得するには、 var aLi = document.getElementsByTagName('li');
            var i = 0;
            (i = 0; i < aLi.length; i++) の場合 {
                var oP = aLi[i].getElementsByTagName('p')[0];
                oP.iAlpha = 0;
                oP.time = null;
                aLi[i].onmouseover = 関数 () {
                    var oP = this.getElementsByTagName('p')[0];
                    oP.time ? clearInterval(oP.time): "";
                    oP.style.opacity = 1;
                    oP.style.filter = "alpha(不透明度=100)";
                    oP.iアルファ = 100;
                }
                aLi[i].onmouseout = 関数 () {
                    スター移動(this.getElementsByTagName('p')[0]);
                };
            }
        };
        関数starmove(obj) {
            obj.time ? clearInterval(obj.time): "";
            obj.time = setInterval(function () { domove(obj); }, 14);
        }
        関数 domove(obj) {
            var iSpeed = 5;
            obj.iAlpha <= iSpeed の場合 {
                間隔をクリアします(obj.time);
                obj.iAlpha = 0;
                obj.time = null;
            } それ以外 {
                obj.iAlpha -= iSpeed;
            }
            obj.style.opacity = obj.iAlpha / 100;
            obj.style.filter = "alpha(opacity=" + obj.iAlpha + ")";
        }
    </スクリプト>
</head>
 
<本文>
    <div id="ボックス">
        <div class="left">
            <h2>
                <strong>最新ニュース</strong>
                <a>さらに</a>
            </h2>
            <ul>
                <li>
                    <p></p>
                    <div>
                        <a>コースに関するよくある質問</a>
                        <span>20110329</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>JS コース修了基準</a>
                        <span>20110327</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Webエフェクトコレクション（毎日更新）</a>
                        <span>20110322</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>クラスの場所</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>CSS コースの最終開始時間</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>最新の JavaScript コース開始時間</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>ゼロから始めるWebデザイン講座</a>
                        <span>20110319</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="right">
            <h2>
                <strong>新着情報</strong>
                <a>さらに</a>
            </h2>
            <ul>
                <li>
                    <p></p>
                    <div>
                        <a>JavaScript で実装された 3D 球状タグ クラウド効果</a>
                        <span>20110329</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>土曜日の JavaScript ミートアップのライブ録画</a>
                        <span>20110327</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Ali フロントエンドの面接の質問</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Google マップ フロントエンドの実装原則の簡単な分析 (パート 1)</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Windows 電卓 (簡易版) 宿題演習</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>アコーディオンイージング効果</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>JavaScript で実装された 3D 球状タグ クラウド効果</a>
                        <span>20110319</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</本文>
 
</html>

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

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