HTML、CSS、jQuery を使用して動的な入力ボックス効果を作成する方法

HTML、CSS、および jQuery を使用して動的な入力ボックス効果を作成する方法

現代の Web デザインでは、動的な効果により、ユーザーの対話性とエクスペリエンスが向上します。ウェブサイトの雰囲気。その中でも、動的な入力ボックス効果は非常に一般的なインタラクション デザインです。この記事では、HTML、CSS、jQuery を使用して動的な入力ボックス効果を作成する方法を紹介し、具体的なコード例を示します。

まず、入力ボックスの効果を実現するための基本的な HTML 構造を作成する必要があります。 HTML では、<div> 要素を使用して入力ボックスのスタイルを表し、CSS を通じてその外観を設定できます。コードは次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;div class=&quot;input-box&quot;&gt; &lt;input type=&quot;text&quot;&gt; &lt;span class=&quot;underline&quot;&gt;&lt;/span&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><p>次に、CSS を使用して入力ボックスのスタイルを設定する必要があります。入力ボックスの幅、高さ、境界線のスタイル、背景色、その他の属性を設定できます。同時に、入力ボックスで下線のスタイルを設定することもできます。具体的な CSS コードは次のとおりです。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div><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 メソッドを使用して下線の幅を設定します。