ステップ 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 を使用してコンテンツを追加し、スタイルを変更するだけです。実際の開発では、必要に応じてスタイルの調整や機能拡張を行うことができます。この記事が満足のいくスクロール ツールチップの作成に役立つことを願っています。