特殊効果メッセージボックスを実現するネイティブJS

この記事では、ネイティブ JS で実装された特殊効果メッセージボックスを紹介します。効果は次のとおりです。

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

<!DOCTYPE html>
<html>
 
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
    <title>特殊効果メッセージ ボックスを実装するネイティブ JS</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0
        }
 
        テキストエリア {
            オーバーフロー:自動;
            サイズ変更: なし;
        }
 
        li {
            リストスタイル: なし;
        }
 
        html{
            高さ: 100%;
        }
 
        体 {
            背景: #570226;
            高さ: 100%;
            フォント: Arial、Helvetica、sans-serif;
        }
 
        h2 {
            フォントファミリー: Arial、Helvetica、sans-serif
        }
 
        。包む {
            幅: 740ピクセル;
            高さ: 498px;
            背景色: #a72244;
            境界線の半径: 30px;
            位置: 絶対;
            上位: 50%;
            左: 50%;
            左マージン: -370px;
            上マージン: -249px;
            オーバーフロー: 非表示;
        }
 
        ＃頭 {
            位置: 絶対;
            左: 50px;
            上: 20px;
            フォントサイズ: 20px;
            色: #fff;
            行の高さ: 28px;
            テキストシャドウ: 2px 2px 0 #a72244;
        }
 
        #head .title {
            位置: 絶対;
            幅: 340ピクセル;
            上: -100px;
        }
 
        #head .url {
            フォントサイズ: 14px;
            位置: 絶対;
            上: 28px;
            不透明度: 0;
            フィルター:アルファ(不透明度=0);
            左: 700ピクセル;
            幅: 340ピクセル;
        }
 
        #リスト{
            位置: 絶対;
            左: 164ピクセル;
            上: -100px;
        }
 
        #リスト li {
            位置: 絶対;
            上: 0;
            左: 0;
        }
 
        .list-left {
            幅: 80ピクセル;
            高さ: 80px;
            背景色: 赤;
            境界線の半径: 40px;
            位置: 相対的;
            テキスト配置: 中央;
            行の高さ: 80px;
            フォントサイズ: 20px;
            色: #f8f8f8;
            zインデックス: 5;
        }
 
        。文章 {
            幅: 0;
            高さ: 0;
            境界線: 1px 実線 #4C4042;
            行の高さ: 26px;
            フォントサイズ: 12px;
            フォントファミリー: Arial、Helvetica、sans-serif;
            色: #000;
            位置: 絶対;
            左: 30px;
            上: 20px;
            zインデックス: 2;
            境界線の半径: 19px;
            アウトライン: なし;
        }
 
 
        #ボタン{
            幅: 50px;
            高さ: 50px;
            背景色: 赤;
            境界線の半径: 40px;
            位置: 絶対;
            テキスト配置: 中央;
            フォントサイズ: 12px;
            色: #fff;
            パディング: 15px;
            行の高さ: 20px;
            テキスト装飾: なし;
            zインデックス: 20;
            左: 335ピクセル;
            上: -240px;
        }
    </スタイル>
    <script src="js/public.js"></script>
    <スクリプト>
        window.onload = 関数（）{
            toHead();
        };
        // 楽しいメッセージボックスのテキスト効果、非常にクラシックな関数 toHead() {
            var oHead = id("head");
            var oUrl = oHead.children[1];
            var oTitle = oHead.children[0]
            var aTitle = oTitle.innerHTML.split("");
            var iNow = 0;
            var oTimer = null;
            var i = 0;
            // 「ハッピーメッセージボックス」を分割 for (i = 0; i < aTitle.length; i++) {
                aTitle[i] = "<span>" + aTitle[i] + "</span>";
            }
            oTitle.innerHTML = aTitle.join("");
            aTitle = oTitle.children;
            (i = 0; i < aTitle.length; i++) の場合 {
                aTitle[i].style.left = aTitle[i].offsetLeft + "px";
                aTitle[i].style.top = aTitle[i].offsetTop + "px";
            }
            (i = 0; i < aTitle.length; i++) の場合 {
                aTitle[i].style.position = "絶対";
            }
            oTimer = setInterval()
                関数 （） {
                    iNow == aTitle.lengthの場合{
                        oTimer の間隔をクリアします。
                        // www.baidu.com sportsstarMove(oUrl, { 左: 0, 不透明度: 100 }, 0, 関数 () {
                            // タイトル QQ コンテンツ 親愛なるお客様、これを完了して toList() の練習を始めてください。
                        });
                    } それ以外 {
                        // ハッピーメッセージの動き starMove(aTitle[iNow], { top: 100 }, 1);
                        iNow++;
                    }
                },
                50);
        };
 
        関数toList() {
            var oList = id("リスト");
            var oBtn = id("btn");
            var aLi = oList.getElementsByTagName("li");
            var aText = getClass('text', oList);
            var aStyle = [
                {
                    高さ: 26,
                    幅: 246,
                    パディング下部: 5,
                    パディング上部: 5,
                    パディング左: 50,
                    パディング右: 50
                },
                {
                    高さ: 26,
                    幅: 246,
                    パディング下部: 5,
                    パディング上部: 5,
                    パディング左: 50,
                    パディング右: 50
                },
                {
                    高さ: 140,
                    幅: 246,
                    パディング下部: 5,
                    パディング上部: 5,
                    パディング左: 50,
                    パディング右: 50
                }
            ];
            var i = 0;
            (i = 0; i < aLi.length; i++) の場合 {
                aLi[i].style.zIndex = aLi.length - i;
            }
            starMove(oList, { 先頭: 94 }, 1, 関数 () {
                テキストを移動します。
                スター移動(aLi[2], { 上部: 85 }, 1);
                starMove(aLi[1], { トップ: 85 }, 1, 関数 () {
                    テキストを移動します。
                    starMove(aLi[2], { トップ: 170 }, 1, 関数 () {
                        starMove(aText[2], aStyle[2], 1, 関数() {
                            oBtn を移動します。
                        });
                    });
                });
            });
        };
    </スクリプト>
</head>
 
<本文>
    <div class="wrap">
        <フォームメソッド="get" id="フォーム">
            <h2 id="head">
                <strong class="title">ハッピーメッセージボックス</strong>
                <span class="url">www.baidu.com</span>
            </h2>
            <div id="リスト">
                <ul>
                    <li>
                        <h3 class="list-left">タイトル</h3>
                        <input type="text" value="" class="text" name="title" disabled="無効" />
                    </li>
                    <li>
                        <h3 class="list-left">QQ</h3>
                        <input type="text" value="" class="text" name="QQ" disabled="無効" />
                    </li>
                    <li>
                        <h3 class="list-left">コンテンツ</h3>
                        <textarea class="text text1" name="content" disabled="無効"></textarea>
                    </li>
                </ul>
                <a href="javascript:;" id="btn">親愛なるお客様、<br />これを完了してください</a>
            </div>
        </フォーム>
    </div>
</本文>
 
</html>

以下は、上で紹介した最も重要な public.js コードであり、多くの便利なメソッドをカプセル化しています。

関数id(id) {
    document.getElementById(id) を返します。
}
関数toBrowser() {
    var ブラウザ = navigator.appName;
    var b_version = navigator.appVersion;
    if (ブラウザ == "Netscape") {
        true を返します。
    }
    var version = b_version.split(";");
    var trim_Version = version[1].replace(/[ ]/g, "");
 
    if (ブラウザ == "Microsoft Internet Explorer" && (trim_Version == "MSIE7.0" || trim_Version == "MSIE6.0" || trim_Version == "MSIE8.0")) {
        false を返します。
    }
    それ以外 {
        true を返します。
    }
}
関数 starMove(obj, target, iType, fnEnd, iDate) {
    タイマーの場合
        タイマー間隔をクリアします。
    }
    iType == 1の場合{
        var sAttr = "";
        obj.iSpeed = {};
        for (sAttr in target) {
            obj.iSpeed[sAttr] = 0;
        }
    }
    if (target["transform"]) {
        （obj["変換"]）の場合{
            ターゲット["変換"] += obj["変換"];
        }
        それ以外 {
            css(obj, sAttr, 0);
        }
    }
    スイッチ (iType) {
        ケース0:
            obj.timer = setInterval(function () { doMoveBuffer(obj, target, fnEnd); }, 24);
            壊す;
        ケース1:
            obj.timer = setInterval(function () { domoveFlexible(obj, target, fnEnd); }, 24);
            壊す;
    }
}
関数doMoveBuffer(obj, target, fnEnd) {
    var sAttr = "";
    var iEnd = 1;
    for (sAttr in target) {
        toBrowser() が false の場合、target["transform"] は次のように記述します。
            続く;
        }
        var iNow = parseFloat(css(obj, sAttr));
        if (iNow == target[sAttr]) {
            続く;
        }
        それ以外 {
            var iSpeed = (target[sAttr] - iNow) / 5;
            iスピード*= 0.75;
            iSpeed > 0の場合{
                iSpeed = Math.ceil(iSpeed);
            }
            それ以外 {
                iSpeed = Math.floor(iSpeed);
            }
            css(obj, sAttr, iNow += iSpeed);
            iEnd = 0;
        }
    }
    if (iEnd) {
        タイマー間隔をクリアします。
        if (fnEnd) {
            fnEnd.call(obj);
        }
    }
}
 
関数 domoveFlexible(obj, target, fnEnd) {
    var sAttr = "";
    var iEnd = 1;
 
    for (sAttr in target) {
        toBrowser() が false の場合、target["transform"] は次のように記述されます。
            続く;
        }
        var iNow = parseFloat(css(obj, sAttr));
        obj.iSpeed[sAttr] += (target[sAttr] - iNow) / 5;
        obj.iSpeed[sAttr] * = 0.75;
        (Math.round(iNow) == target[sAttr] && Math.abs(obj.iSpeed[sAttr]) < 1) の場合 {
            続く;
        }
        それ以外 {
            iNow = Math.round(iNow + obj.iSpeed[sAttr]);
            css(obj, sAttr, iNow);
            iEnd = 0;
        }
    }
    if (iEnd) {
        タイマー間隔をクリアします。
        if (fnEnd) {
            fnEnd.call(obj);
        }
    }
}
関数 css(obj, 属性, 値) {
    （引数の長さ == 2）の場合{
        if (attr == "変換") {
            obj.transform を返します。
        }
        var i = parseFloat(obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr]);
        var val = i ? i: 0;
        if (attr == "不透明度") {
            値 * = 100;
        }
        戻り値:
    }
    そうでない場合（引数の長さ == 3）{
        スイッチ (属性) {
            ケース '幅':
            ケース '高さ':
            ケース 'paddingLeft':
            ケース 'paddingTop':
            ケース 'paddingRight':
            ケース 'paddingBottom':
                値 = Math.max(値、0);
            ケース「左」:
            ケース 'top':
            ケース 'marginLeft':
            ケース 'marginTop':
            ケース 'marginRight':
            ケース 'marginBottom':
                obj.style[attr] = 値 + 'px';
                壊す;
            ケース '不透明度':
                値 < 0 の場合 {
                    値 = 0;
                }
                obj.style.filter = "alpha(不透明度:" + 値 + ")";
 
                obj.style.opacity = 値 / 100;
                壊す;
            ケース '変換':
                obj.transform = 値;
                obj.style["transform"] = "rotate(" + value + "deg)";
                obj.style["MsTransform"] = "rotate(" + value + "deg)";
                obj.style["MozTransform"] = "rotate(" + value + "deg)";
                obj.style["WebkitTransform"] = "rotate(" + value + "deg)";
                obj.style["OTransform"] = "rotate(" + value + "deg)";
                壊す;
            デフォルト：
                obj.style[属性] = 値;
        }
 
        関数 (attr_in, value_in) を返します { css(obj, attr_in, value_in) };
    }
}
関数 getClass(sClass, obj) {
    var aRr = [];
    もし（オブジェクト）{
        var aTag = obj.getElementsByTagName('*');
    }
    それ以外 {
        タグ名から要素を取得します。
    }
    (var i = 0; i < aTag.length; i++) の場合 {
        var aClass = aTag[i].className.split(" ");
        (var j = 0; j < aClass.length; j++) の場合 {
            (aClass[j] == sClass)の場合{
                aRr.push(aTag[i]);
            }
        }
    }
    aRr を返します。
}
関数byClient(obj, attr) {
    属性 == "幅" の場合 {
        css(obj, "borderLeft") + css(obj, "borderRight") + css(obj, "paddingLeft") + css(obj, "paddingWidth") + css(obj, "paddingWidth"); を返します。
    }
    そうでない場合 (属性 == "高さ") {
        css(obj, "borderTop") + css(obj, "borderBottom") + css(obj, "paddingTop") + css(obj, "paddingBottom") + css(obj, "paddingHeight"); を返します。
    }
}

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

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