ホームページ > 記事 > ウェブフロントエンド > HTML、CSS、jQuery を使用して動的な入力ボックス効果を作成する方法
HTML、CSS、jQuery を使用して動的な入力ボックス効果を作成する方法
- PHPzオリジナル
- 2023-10-28 09:18:20777ブラウズ
HTML、CSS、および jQuery を使用して動的な入力ボックス効果を作成する方法
現代の Web デザインでは、動的な効果により、ユーザーの対話性とエクスペリエンスが向上します。ウェブサイトの雰囲気。その中でも、動的な入力ボックス効果は非常に一般的なインタラクション デザインです。この記事では、HTML、CSS、jQuery を使用して動的な入力ボックス効果を作成する方法を紹介し、具体的なコード例を示します。
まず、入力ボックスの効果を実現するための基本的な HTML 構造を作成する必要があります。 HTML では、<div> 要素を使用して入力ボックスのスタイルを表し、CSS を通じてその外観を設定できます。コードは次のとおりです。 <pre class='brush:html;toolbar:false;'><div class="input-box">
<input type="text">
<span class="underline"></span>
</div></pre><p>次に、CSS を使用して入力ボックスのスタイルを設定する必要があります。入力ボックスの幅、高さ、境界線のスタイル、背景色、その他の属性を設定できます。同時に、入力ボックスで下線のスタイルを設定することもできます。具体的な CSS コードは次のとおりです。 </p><pre class='brush:css;toolbar:false;'>.input-box {
position: relative;
width: 200px;
height: 30px;
border-bottom: 1px solid #ccc;
}
.input-box input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: transparent;
}
.input-box .underline {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #ccc;
transform-origin: center;
transform: scaleX(0);
transition: transform 0.3s ease;
}</pre><p> 上記のコードでは、<code>position:Absolute を使用して入力ボックスと下線の位置を設定し、width: 100 を使用します。 % と height: 100% を使用して、入力ボックスと下線を親要素全体に塗りつぶします。
次に、jQuery を使用して動的な効果を実現する必要があります。ユーザーがコンテンツを入力すると、入力ボックスの input イベントをリッスンし、入力コンテンツに基づいて下線の幅を変更できます。具体的な jQuery コードは次のとおりです。
$('.input-box input').on('input', function() {
var inputWidth = $(this).val().length * 10;
$('.input-box .underline').css('transform', 'scaleX(' + inputWidth + ')');
}); 上記のコードでは、まず入力ボックスの input イベントをリッスンし、次に val().length# を使用します。 ## 入力内容の長さを取得し、係数 (ここでは 10) を乗算して、下線の幅を計算します。最後に、css メソッドを使用して下線の幅を設定します。
以上がHTML、CSS、jQuery を使用して動的な入力ボックス効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。