この記事では、ネイティブ 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: HTML テーブル タグ チュートリアル (31): セルの幅と高さの属性 WIDTH、HEIGHT
MySQLデータベースの基本構文DDL操作データベース作成構文: create database デ...
<br />原文: http://andymao.com/andy/post/104.h...
タイトルXML/HTML コードコンテンツをクリップボードにコピー< h1 >第 1 レ...
説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...
目次導入主な特徴エフェクト表示キーコード導入音声キューイングシステムは、銀行、レストラン、病院などの...
目次フロントエンドルーティングとは何ですか?フロントエンドルーティングを実装するにはどうすればいいで...
ドラッグ機能は主に、ドラッグによる並べ替え、ポップアップ ボックスのドラッグと移動など、ユーザーがカ...
Redux はシンプルな状態マネージャーです。その歴史をたどることはしません。使用法の観点から見ると...
目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...
目次1 Baota Software StoreにDockerをインストールする2 ゴグスイメージを...
目次シナリオ効果コード要約するシナリオ登録ページに携帯電話番号を入力し、登録インターフェイスを要求す...
1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...
最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...
ここで言及されている SSH は Security Shell と呼ばれます。Linux をよく使用...
目次1. スタック構造を理解する2. スタック構造のカプセル化3. 10進数を2進数に変換する1. ...