共有サイドバーを実装するためのネイティブ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データベースの基本構文と操作

MySQLデータベースの基本構文DDL操作データベース作成構文: create database デ...

HTML チュートリアル: 定義リスト

<br />原文: http://andymao.com/andy/post/104.h...

HTML のタイトル、段落、改行、水平線、特殊文字についての簡単な説明

タイトルXML/HTML コードコンテンツをクリップボードにコピー< h1 >第 1 レ...

Vueテクノロジーに基づく再帰コンポーネントの実装方法

説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...

音声キューイングシステムを実装するためのJavaScript

目次導入主な特徴エフェクト表示キーコード導入音声キューイングシステムは、銀行、レストラン、病院などの...

ブラウザの自動更新を実装するReactサンプルコード

目次フロントエンドルーティングとは何ですか?フロントエンドルーティングを実装するにはどうすればいいで...

jsドラッグ効果の原理と実装

ドラッグ機能は主に、ドラッグによる並べ替え、ポップアップ ボックスのドラッグと移動など、ユーザーがカ...

react+reduxを使用してカウンター機能を実装すると発生する問題

Redux はシンプルな状態マネージャーです。その歴史をたどることはしません。使用法の観点から見ると...

NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。

目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...

パゴダパネルとドッカーを使用して Gogs をインストールするプロセス全体

目次1 Baota Software StoreにDockerをインストールする2 ゴグスイメージを...

携帯電話番号が合法かどうかを判断するWeChatアプレットのサンプルコード

目次シナリオ効果コード要約するシナリオ登録ページに携帯電話番号を入力し、登録インターフェイスを要求す...

MySQL 上級学習インデックスの長所と短所、使用ルール

1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...

nginx rewriteを使用してURLをリダイレクトする方法

最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...

Windows SSHサーバーを簡単に構築するためのいくつかの手順

ここで言及されている SSH は Security Shell と呼ばれます。Linux をよく使用...

JavaScriptはスタック構造の詳細なプロセスを実装する

目次1. スタック構造を理解する2. スタック構造のカプセル化3. 10進数を2進数に変換する1. ...