HTML、CSS、jQuery: 美しいスクロールツールチップを作成する-jsチュートリアル-php.cn

HTML、CSS、jQuery: 美しいスクロールツールチップを作成する

WBOY

リリース： 2023-10-26 09:47:13

オリジナル

936 人が閲覧しました

HTML、CSS、jQuery: 美しいスクロールツールチップを作成する

HTML、CSS、jQuery: 美しいスクロールプロンプトボックスを構築する

はじめに:
Web デザインと開発では、スクロールプロンプトボックスは、次の目的で使用される一般的なコンポーネントです。ユーザーに重要な情報や通知を表示します。この記事では、HTML、CSS、jQuery を使用して美しいスクロールプロンプトボックスを構築する方法を紹介し、具体的なコード例を示します。

ステップ 1: HTML 構造の作成

まず、基本的な HTML 構造を作成し、コンポーネントに一意の識別 ID を与える必要があります。コードは次のとおりです:

<div id="scrolling-box">
  <div id="content">
    <!-- 在此处插入提示内容 -->
  </div>
</div>

ログイン後にコピー

タグには、テキスト、画像、その他の HTML など、表示したいプロンプトコンテンツを挿入できます。要素。

ステップ 2: CSS スタイルを定義する

次に、スクロールするプロンプトボックスを美しくするために CSS スタイルを定義する必要があります。特定のスタイルは、必要に応じてカスタマイズできます。次の例は参考用です:

#scrolling-box {
  width: 400px;
  height: 200px;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

ログイン後にコピー

上記のコードでは、CSS のアニメーションプロパティを使用してスクロール効果を実現しています。初期状態と終了状態の変換属性はアニメーション @keyframes に設定されており、垂直方向の変位を徐々に変化させることでスクロール効果を実現します。

ステップ 3: jQuery コードを追加する

最後に、jQuery を使用して、スクロールプロンプトボックスのコンテンツを動的に追加または変更します。まず、jQuery ライブラリを導入し、次のコードを記述する必要があります。

$(document).ready(function() {
  // 添加内容到滚动提示框
  $('#content').append('<p>这是一条示例提示信息。</p>');

  // 修改滚动提示框的样式
  $('#scrolling-box').css('background-color', '#f5f5f5');
});

ログイン後にコピー

上記のコードでは、jQuery の .ready() 関数を使用して、コードを実行する前にドキュメントがロードされていることを確認します。セレクターを使用してスクロールプロンプトボックスのコンテンツコンテナーと外側のコンテナーを選択し、.append() 関数を使用してコンテンツを追加し、.css() 関数を使用してスタイルを変更できます。

概要:
HTML、CSS、jQuery を組み合わせることで、美しいスクロールプロンプトボックスを簡単に構築できます。 HTML 構造を作成し、CSS スタイルを定義し、jQuery を使用してコンテンツを追加し、スタイルを変更するだけです。実際の開発では、必要に応じてスタイルの調整や機能拡張を行うことができます。この記事が満足のいくスクロールツールチップの作成に役立つことを願っています。

以上がHTML、CSS、jQuery: 美しいスクロールツールチップを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。