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

共有サイドバーを実装するためのネイティブ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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScriptでシームレススクロールを実装し、サイドバーのサンプルコードに共有する
  • JS モーション フレームワーク共有サイドバー アニメーションの例
  • スクロールバーに合わせてスライドするブログサイドバーモジュールの固定効果を実装する方法(js+jqueryなど)
  • 動的なサイドバーコードを実装するためのJavaScript
  • シンプルな非表示サイドバー機能を実現する JavaScript の例
  • 動的サイドバーの例の JavaScript 実装の詳細な説明
  • js を使用してレスポンシブ サイドバーを作成する
  • JS はサイドバーのマウスオーバーポップアップボックス + バッファ効果を実装します
  • slideout.js をベースにモバイル サイドバーのスライド効果を実装する
  • フルスクリーンサイドバーを実現するためのjs+css

<<:  MySQLがデータの削除を推奨しない理由

>>:  HTML テーブル タグ チュートリアル (31): セルの幅と高さの属性 WIDTH、HEIGHT

推薦する

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...

Linux で MySQL のスケジュールバックアップを実装する方法

実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...

MySQL inndbジョイントインデックスを正しく使用する方法を徹底的に理解するためのケーススタディ

最近確認された5件のデータを照会するビジネスがあります。 `id`、`title` を選択 `th_...

CSS3 を使用して楕円軌道の回転を実装するサンプルコード

最近、次のような効果を達成する必要がある最初は、CSS3D回転を使用して記述すると、次の効果しか得ら...

HTML tbody の使用

構造化テーブル (IExplore のみ) 1) 行ごとにグループ化<thead> .....

魔法のMySQLデッドロックトラブルシューティング記録

背景MySQL のデッドロックについて言えば、私は以前 MySQL のロックに関する基本的な紹介記事...

Dockerを使用して外部からアクセス可能なMySQLを構築する詳細な説明

MySQL 8.0をインストールする docker run -p 63306:3306 -e MYS...

SSL を実装するために nginx を設定する方法の例

環境説明サーバーシステム: Ubuntu 18.04 64ビットnginx: 1.14この記事では主...

W3C チュートリアル (13): W3C WSDL アクティビティ

Web サービスは、アプリケーション間の通信に関係します。 WSDL は、XML ベースの Web ...

長いデータを HTML で表示するときに処理する方法

HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...

HTMLフォーム入力監視の詳細な理解

今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...

Linux で MySQL のデフォルト エンコーディングを変更する方法

開発プロセス中に、MySQL データベースを復元した後にデータベース データに文字化けが発生した場合...

HTML で div を非表示にする テーブルを非表示にする TABLE または DIV コンテンツの CSS スタイル

今夜、数日間悩まされていた問題を解決しました。本当に解決したかどうかはわかりませんが、解決されている...

Vue+element はローカル検索機能付きのドロップダウン メニューを実装します

必要:バックエンドは配列オブジェクトを返し、それがフロントエンドで配列に結合されます。配列は名前に従...

Linux ssh サービス情報と実行ステータスを表示する方法

Linux での ssh サービス構成など、ssh サーバー構成に関する記事は多数あります。ここでは...