HTML、CSS、jQuery: フローティング効果のあるボタンを作成する-jsチュートリアル-php.cn

HTML、CSS、jQuery: フローティング効果のあるボタンを作成する

WBOY

リリース： 2023-10-24 12:09:39

オリジナル

995 人が閲覧しました

HTML、CSS、jQuery: フローティング効果のあるボタンを作成する

HTML、CSS、jQuery: フローティング効果のあるボタンを作成するには、特定のコード例が必要です

はじめに:
現在、Web デザインはアート形式になりました。 HTML、CSS、JavaScript などのテクノロジーを使用すると、さまざまな特殊効果やインタラクティブ効果をページに追加できます。この記事では、HTML、CSS、jQuery を使用してフローティング効果のあるボタンを作成する方法を簡単に紹介し、具体的なコード例を示します。

1. HTML 構造
まず、ボタンに必要な基本構造を HTML ファイル内に作成する必要があります。コード例は次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动按钮</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <button class="float-btn">点击我</button>
    </div>
  </body>
</html>

ログイン後にコピー

上記のコードでは、ボタン <ボタンを含むコンテナ <div class="container"> を作成します。 class= "float-btn">。フローティング効果を実現するには、<head> に CSS ファイルを導入する必要もあります。

2. CSS スタイル
次に、CSS を使用してボタンのスタイルを設定し、フローティング効果を実現します。次の CSS コード例を参照してください。

.container {
  width: 300px;
  height: 300px;
  position: relative;
}

.float-btn {
  width: 150px;
  height: 50px;
  background-color: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s, box-shadow 0.3s;
}

.float-btn:hover {
  transform: translateX(-50%) translateY(-10px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

ログイン後にコピー

上記のコードでは、コンテナとボタンにそれぞれスタイルを設定しました。コンテナの幅と高さ <div class="container"> は 300px に固定され、相対的に配置されます。 Button<button class="float-btn"> スタイルには、幅と高さ、背景色、フォントの色、境界線のスタイル、角丸スタイル、フォントサイズなどが含まれます。このボタンは、絶対位置と left、transform 属性によってコンテナーの下部の水平方向の中央に配置されます。 transitionこの属性は、変換効果の遷移時間を指定するために使用されます。

ボタンの :hover 疑似クラススタイルでは、transition 属性と transform 属性を使用して、ボタンの動作を実装します。マウスがホバリングしている、フローティング効果。マウスをボタンの上に置くと、ボタンは影付きで 10 ピクセル上に浮き上がります。

3. jQuery の動的効果
最後に、jQuery を使用して、クリックイベントの動的効果をボタンに追加します。コード例は次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动按钮</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container">
      <button class="float-btn">点击我</button>
    </div>
  </body>
</html>

ログイン後にコピー

$(document).ready(function() {
  $('.float-btn').click(function() {
    $(this).toggleClass('active');
  });
});

ログイン後にコピー

上記のコードでは、最初にに jQuery ライブラリファイルを導入しました。次に、script.js ファイルで $(document).ready() 関数を使用して、ページが読み込まれた後に次のコードが実行されるようにします。ボタンをクリックしたら、toggleClass() メソッドを使用して、ボタンの active クラスを追加または削除します。このようにして、ボタンがアクティブなときに追加でボタンのスタイルを設定したり、アニメーション化したりできます。

概要:
HTML、CSS、jQuery を使用すると、この記事で示したフローティング効果のあるボタンなど、さまざまな特殊効果やインタラクティブ効果を作成できます。この記事のコード例を通じて、読者がそのような効果を実現する方法を予備的に理解し、独自のニーズに応じて設計をさらに最適化およびカスタマイズできることを願っています。

以上がHTML、CSS、jQuery: フローティング効果のあるボタンを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。