この記事では、ネイティブ 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
序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...
実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...
最近確認された5件のデータを照会するビジネスがあります。 `id`、`title` を選択 `th_...
最近、次のような効果を達成する必要がある最初は、CSS3D回転を使用して記述すると、次の効果しか得ら...
構造化テーブル (IExplore のみ) 1) 行ごとにグループ化<thead> .....
背景MySQL のデッドロックについて言えば、私は以前 MySQL のロックに関する基本的な紹介記事...
MySQL 8.0をインストールする docker run -p 63306:3306 -e MYS...
環境説明サーバーシステム: Ubuntu 18.04 64ビットnginx: 1.14この記事では主...
Web サービスは、アプリケーション間の通信に関係します。 WSDL は、XML ベースの Web ...
HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...
今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...
開発プロセス中に、MySQL データベースを復元した後にデータベース データに文字化けが発生した場合...
今夜、数日間悩まされていた問題を解決しました。本当に解決したかどうかはわかりませんが、解決されている...
必要:バックエンドは配列オブジェクトを返し、それがフロントエンドで配列に結合されます。配列は名前に従...
Linux での ssh サービス構成など、ssh サーバー構成に関する記事は多数あります。ここでは...