序文JavaScript で記述できるアプリケーションは、最終的には JavaScript で記述されることになります。 ——アトウッドの法則 ある程度まではすべて JavaScript でも可能ですが、CSS の方が JavaScript よりも動作効率が高いため、CSS で実現できるのであれば JavaScript で悩む必要はないと筆者は考えています。 両方の言語には異なる用途があります。ブラウザの機能やプロパティが増えるにつれて、CSS は、これまで JavaScript に依存して実装していた機能を処理できる強力な言語になりつつあります。 スムーズなスクロールこれを実現するために、JavaScript の html{ スクロール動作: スムーズ; } 完全なコード[1] ローリングキャプチャスライドショーや画像ギャラリーもフロントエンドで頻繁に使用される機能です。以前の世代の CSS では機能が制限されていたため、これらの機能を実現するには JavaScript に頼る必要があります。今では、この機能はわずか数行のコードで実現できます。ある意味 <メインクラス="親"> <セクションクラス="child"></セクション> <セクションクラス="child"></セクション> <セクションクラス="child"></セクション> </メイン> 。親 { scroll-snap-type: x 必須; } 。子供 { スクロールスナップ位置合わせ: 開始; } 完全なコード[2] CSSアニメーションかつては、ほとんどの開発者がブラウザ内の要素をアニメーション化するために JavaScript (または jQuery) を使用していました。これをフェードアウトしてあれを拡大するのは非常に簡単です。インタラクティブ プロジェクトが複雑になり、モバイル デバイスの数が増えるにつれて、パフォーマンスがますます重要になります。 Flash は放棄され、才能あるアニメーション開発者は HTML5 を使用して、これまで不可能だった効果を実現しました。複雑なアニメーションシーケンスを開発し、最高のパフォーマンスを実現するために、より優れたツールが必要でした。 JavaScript (または jQuery) ではそれができません。ブラウザが成熟するにつれて、いくつかのソリューションも提供され始めます。最も広く受け入れられている解決策は、CSS アニメーションを使用することです。 完全なコード[3] フォーム検証HTML5 はフォーム要素を充実させ、required、email、tel などのフォーム要素属性を提供します。同様に、:valid と :invalid を使用して HTML5 フォーム属性を検証できます。
CSS のコンテンツ属性 attr を使用してデータを取得する誰もが疑似要素を思い浮かべると思いますが、テキストはどうやって取得するのでしょうか?JavaScript は使用できません。 CSS 疑似要素は非常に強力です。さまざまな目的に使用できます。通常、何らかの効果を生み出すために、content:" " は空白のままにされることがほとんどですが、実際には、そこに attr を記述して情報を取得できます。 <div data-msg="コンテンツを取得するためのコンテンツはこちら"> ホバー </div> div{ 幅:100ピクセル; border:1px 赤一色; 位置:相対; } div:hover:after{ コンテンツ:attr(データメッセージ); 位置:絶対; フォントサイズ: 12px; 幅:200%; 行の高さ:30px; テキスト配置:中央; 左:0; 上:25px; border:1px 緑一色; } マウスホバー時に表示マウスのホバーは、ナビゲーション メニューなどでは非常に一般的です。 一般的に、メニューなどの非表示のものは、CSS 制御を容易にするために、ホバー ターゲットの子要素または隣接要素として配置する必要があります。たとえば、上記のメニューはナビゲーションの隣接要素として配置されています。 <!--メニューは隣接しています--> <li class="user">ユーザー</li> <li class="メニュー"> <ul> <li>アカウント設定</li> <li>ログアウト</li> </ul> </li> 通常状態ではメニューは非表示になっています: 。メニュー{ 表示: なし; } ナビゲーションにマウスを移動すると、次の内容が表示されます。 /*隣接セレクターとホバーの使用*/ .user:hover + .menu{ 表示: リスト項目; } ここでは隣接セレクターが使用されていることに注意してください。そのため、上記のように隣接要素として記述されています。メニューの位置を絶対的に配置できます。 同時に、メニュー自体もホバーしたときに表示される必要があります。そうしないと、マウスがナビゲーションから離れるとすぐにメニューが消えてしまいます。 .menu:hover{ 表示: リスト項目; } ここで小さな問題が発生します。つまり、メニューとナビゲーションは隣り合っていなければなりません。そうでないと、中央に隙間があると、上に追加されたメニューホバーが機能しません。ただし、実際の状況では、美観の観点から、両者の間には一定の距離が必要です。これは実際には簡単に解決できます。下の青い四角のように、メニューに透明な領域を描くだけです。 これは、絶対位置指定の before/after 疑似クラスを使用して実現できます。 ul.menu:before{ コンテンツ: ""; 位置: 絶対; 左: 0; 上: -20px; 幅: 100%; 高さ: 20px; /*背景色: rgba(0,0,0,0.2);*/ } CSS hover を記述してマウス イベントをリッスンし、マウスを使用して表示と非表示を制御すると、二重の効果で何が起こりますか? 通常のルーチンに従って、マウス イベントでホバーするときに display: block スタイルを追加すると、CSS 設定が上書きされます。つまり、一度マウスをホバーすると、インライン スタイルの優先度が外部リンクの優先度よりも高くなるため、CSS コードは役に立たなくなります。しかし、実際の状況では、予期しないことが起こる可能性があります。つまり、モバイル iPhone では、タッチによって CSS ホバーがトリガーされ、このトリガーは touchstart イベントに先行する可能性が高くなります。このイベントでは、現在の状態が表示されているか非表示になっているかが判断されます。CSS ホバーが役割を果たしているため、表示されていると判断され、その後非表示になります。つまり、一度クリックしても機能しない場合は、2 回クリックする必要があります。したがって、両方を同時に書かない方がよいでしょう。子要素を使用する 2 番目のシナリオは、より単純です。ホバー ターゲットと非表示オブジェクトを同じ親コンテナーの子要素として扱い、この親コンテナーにホバーを記述します。上記のように、非表示要素にホバーを記述する必要はありません。 .マーカーコンテナ .詳細情報{ 表示: なし } .マーカーコンテナ:hover .詳細情報{ 表示: ブロック } やっとここで紹介した関数は、よく使われる関数の一部にすぎません。実際には、CSS で実装できる関数は数多くあります。興味のある学生は、JavaScript に依存しない CSS 関数をさらに学習することができます。 CSS が使えるなら JavaScript を気にする必要はないというこの記事はこれで終わりです。CSS スムーズスクロールに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Linux環境にDocker環境をインストールする(落とし穴なし)
必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...
1. Java環境jdk1.8を準備するJavaがインストールされているかどうかを確認します。イン...
目次アニメーションプレビューその他のUIライブラリ始めるコンポーネントディレクトリ構造トーストおおよ...
参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。毎回の授業...
チームは新しいフレームを交換しました。すべての新しいビジネスでは、新しいフレームワークと新しいデータ...
目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....
この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介...
docker-compose.yml ファイルで './' 相対パスを許可する バー...
目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...
セマンティクスについて意味論は、記号やシンボルとそれらが表す意味との関係を研究する学問です。言語学で...
目次1. 型2. インスタンス3. コンストラクター4.toString() この記事では、4 つの...
MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...
ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...
1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...
目次最初にコールバック関数を使用するes6 非同期処理モデルこの非同期モデルに合わせたAPI: pr...