共有サイドバーを実装するためのネイティブJS

この記事では、ネイティブ JS で実装された共有サイドバーを紹介します。効果は次のとおりです。

以下は、コピーして貼り付ける際の便宜を図るためのコード実装です。

<!DOCTYPE html>
<html>
 
<head lang="ja">
    <メタ文字セット="UTF-8">
    <title>共有して効果を得る</title>
    <スタイル>
        ＃共有 {
            位置: 固定;
            幅: 100ピクセル;
            高さ: 200px;
            背景色: 水色;
            左: -100px;
            上: 100px;
        }
 
        #共有スパン{
            幅: 20px;
            高さ: 60px;
            行の高さ: 20px;
            テキスト配置: 中央;
            左: 100px;
            上: 70px;
            位置: 絶対;
            背景色: 黄色;
        }
    </スタイル>
 
</head>
 
<本文>
 
    <div id="共有">
        <span>共有する</span>
    </div>
 
    <スクリプト>
        // 要素を取得します var share = document.getElementById("share");
        // 共有するイベントを設定する
        share.onmouseover = 関数（）{
            アニメーション化(これを「左」、0);
        };
        share.onmouseout = 関数（）{
            アニメーション化(これを「左」に-100)。
        };
 
        // モーションをアニメーション化する関数 function animate(tag, attr, target) {
            間隔をクリアします(tag.timer);
            tag.timer = setInterval(関数() {
 
                // 属性の現在の状態を取得します // 単位があるため、丸める必要があります // parseInt("hehe") => NaN NaN || 0
                // NaN への自動変換の問題に対処するために、短絡操作を使用してプログラムの堅牢性を確保します。var leader = parseInt(getStyle(tag, attr)) || 0;
 
                // イージング式の一部はステップの値を変更することです。var step = (target - leader) / 10;
 
                // offsetLeft は値を取得するときに丸められるため、step が比較的小さい場合は動きに問題が発生します。// ステップの正負の数に応じて丸め方法を変更します。step = step > 0 ? Math.ceil(step) : Math.floor(step);
 
                // イージング式 Leader = Leader + Step;
 
                // 特定の属性に設定します tag.style[attr] = leader + "px";
 
                // 指定された位置に到達したかどうかを確認します if (leader == target) {
                    間隔をクリアします(tag.timer);
                }
            }, 17);
        }
 
        // ユニット関数 getStyle(tag, attr) でタグのスタイル属性値を取得するために使用します。
            // サポートされているものを確認します // box.currentStyle、存在しない場合は値は未定義です
            // ブラウザがサポートしていない場合は getComputedStyle を使用します。これは変数が宣言されていないことと同等であり、エラーを報告します。if (tag.currentStyle) {
                // つまり、サポートされます return tag.currentStyle[attr];
            } それ以外 {
                // 標準メソッド return getComputedStyle(tag, null)[attr];
            }
        }
 
    </スクリプト>
</本文>
 
</html>

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

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