ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript はどのような効果を実現できますか?

JavaScript はどのような効果を実現できますか?

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-07-21 11:51:139468ブラウズ

JavaScript は、カルーセル画像、フォーム検証、ページ内のポップアップ ボックス、Web ページ上のアニメーション、フローティング広告、揺れる写真、評価を達成するための五芒星、および一定時間ごとにページを表示できます 期間内にイベントが発生しない場合、効果は終了します。

JavaScript はどのような効果を実現できますか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

フロントエンド開発では必ず学ばなければならない技術なので、とても役立つはずですよね。はい、js でできることはたくさんあります。 js は DOM を簡単に操作できるため、クライアントにさまざまな影響を与えることができます。では、jsによってどのような効果が得られるのでしょうか?ここでは、初心者が js が何をするのかを理解できるように、初心者が参照できる一般的なエフェクトをいくつか紹介します。 JavaScript 言語の使い方を覚えれば、次のような効果を簡単に作成できます。

1. カルーセル画像: 以下の図に示すように、カルーセル画像は通常、Web サイトの中央にある画像を切り替える場所です。

JavaScript はどのような効果を実現できますか?

写真を 1 枚ずつスライドさせる効果。その原理は実際には非常に単純です: 中央に画像を表示するボックスには 1 枚の画像しか表示できません。実際、このボックス内の高さは表示ボックスと同じ高さですが、幅は表示ボックスよりもはるかに大きいです。表示ボックスです。この長い大きなボックスには、左から右にいくつかの絵が並んでいます。これらの絵はカルーセルに使用されます。表示するときは、この長いボックスの露出位置を変更するだけで済みます。以下に示すように。

JavaScript はどのような効果を実現できますか?

それでは、js を介してこの効果を実現する方法: CSS レイアウトが完了して、大きなボックスの中にネストされたこのような小さなボックスを作成した後、画像のリークの効果が次のようになります。 CSS 位置決めテクノロジを使用して実現されるため、js が行う必要があるのは、位置決め値を動的に変更することだけです。

2. フォームの確認: フォームは、アカウントに登録してログインするときに入力する必要がある部分であり、フォームと呼ばれます。たとえば、登録時に 2 回入力したパスワードが一致しない場合、すぐに赤いプロンプト メッセージが表示されますが、これは js によって作成された効果です。

JavaScript はどのような効果を実現できますか?

#3. ページ上のポップアップ ボックス: たとえば、ページ上にポップアップ表示される警告メッセージやプロンプト メッセージはすべて js によって作成されます。

4. 複数レベルのタブ: タオバオの商品カテゴリのように、マウスを置くとカテゴリが表示され、そのカテゴリからカテゴリを分けることができますが、これもjsで行われます。

Web ページ上のアニメーション、フローティング広告、揺れる写真、スコア効果を実現する五芒星など、JS で実行できる効果は数多くあります。一定期間内にイベントが発生しないとページは閉じられます。時間等はこちらに一つ一つ記載しておりません。 jsを学べばこれらのエフェクトも簡単に作成できます。

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScript はどのような効果を実現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。