HTML はモバイル上で固定フローティング半透明検索ボックスを実装します

質問。

モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは、ページの上部に固定され、半透明で吊り下げられ、カルーセルの一部がぼんやり見えるこのタイプの検索ボックスを好みます。

このような検索ボックスを作成するには、次の技術的な鍵が必要です。

検索ボックスの位置を修正
不透明度透明度を設定します

解決。

まず、HTML フラグメントを定義します。

<!-- 検索ボックス -->
<ヘッダークラス="bar">
  <フォーム名="検索" クラス="検索" id="検索" アクション="">
    <div class="検索行">
      <input type="検索" name="単語" id="単語">
      <span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">検索</span></span>
    </div>
  </フォーム>
</ヘッダー>
<!-- 背景画像はカルーセル画像であることが多い-->
<div class="背景">
  <img src="bg.jpg">
</div>

ヘッダータグは検索ボックスで、その下の div は背景画像です。

CSS スタイルも添付します:

<スタイル タイプ="text/css">
体 {
  マージン: 0; パディング: 0;
  フォント サイズ: 14px; フォント ファミリ: "microsoft yahei",'Arial', 'Verdana','Helvetica', sans-serif;
}
。バー {
  position: fixed; top: 0; left: 0; right: 0; /* 検索ボックスを上部に固定するかどうかを決定します */
  高さ: 44px; パディング: 0 10px;
  background-color: #fff; opacity: 0.8; /*検索ボックスの半透明効果*/
  zインデックス: 10;
}
.bar フォーム {
  表示: ブロック; パディング: 0; マージン: 0;
}
.検索行{
  位置: 相対的;
  高さ: 30px; パディング: 7px 0;
}
.search-row 入力[type=search] {
  位置: 絶対; 上: 7px;
  高さ: 30px; 行の高さ: 21px; 幅: 100%; パディング: 10px 15px 10px 30px;
  境界線: 0; 境界線の半径: 6px; アウトライン: 0; 背景色: rgba(0,0,0,0.1);
  フォントサイズ: 16px; テキスト配置: 中央;
  zインデックス: 100;
}
.検索行 .プレースホルダー {
  位置: 絶対; 上: 2px; 左: 0; 右: 0;
  表示: インラインブロック; 高さ: 34px; 行の高さ: 34px;
  境界線: 0; 境界線の半径: 6px;
  フォントサイズ: 16px; テキスト配置: 中央; 色: #999;
  zインデックス: 1;  
}
.検索行 .プレースホルダー .アイコンフォント {
  表示: インラインブロック; 幅: 19px; 行の高さ: 24px; パディング: 10px 0; 
  フォントサイズ: 21px; 色: #666;
}
.検索行 .プレースホルダー .テキスト {
  行の高さ: 40px;
  垂直方向の位置合わせ: 上;
}
.背景画像{
  幅: 100%;
}
.active:before {
  位置: 絶対; 上: 11px; 左: 5px; 右: 自動;
  表示: ブロック; 右マージン: 0;
  フォントサイズ: 21px;
}
.active input[type=検索] {
  テキスト配置: 左
}
.アクティブ .プレースホルダー{
  表示: なし
}
</スタイル>

これは CSS スタイルの長いセクションですが、その核となるのは、position: fixed; /* 検索ボックスを上部に固定することを決定します */ と background-color: #fff; opacity: 0.8; /* 検索ボックスの半透明効果 */ の 2 つの文だけです。その他のスタイルは、ページのレイアウト用です。レイアウトの詳細は、読者自身が記述して理解する必要があり、時間がかかる場合があります。

このようにして、静的な検索ボックスが完成しました。

注: ここでの検索アイコンは iconfont を使用しています。読者は iconfont ベクターアイコンライブラリからダウンロードできます。

この時点で、JS を通じていくつかのアニメーションを実装する必要があります。

これは、ユーザーが入力を切り替えたときに「検索」場所アイコンを切り替えるために使用されます。原理は非常に単純で、スタイルを定義するクラスを追加および削除します。

.active:before {
  位置: 絶対; 上: 11px; 左: 5px; 右: 自動;
  表示: ブロック; 右マージン: 0;
  フォントサイズ: 21px;
}
.active input[type=検索] {
  テキスト配置: 左
}
.アクティブ .プレースホルダー{
  表示: なし
}
<script type="text/javascript">
/* 入力ボックスにフォーカスが当たり、ユーザーが入力中であることを示します*/
$("#word").focusin(function() {
  $(".search-row").addClass("active iconfont icon-sousuo");
});
/* 入力ボックスのフォーカスが失われ、ユーザーが入力を終了したことを示します*/
$("#word").focusout(関数() {
  /* ユーザーが入力したコンテンツがあるかどうかを確認します*/
  ($(this).val()=="") の場合 {
    /* スタイルを変更するコンテンツ入力がありません*/
    $(".search-row").removeClass("active iconfont icon-sousuo");
  } それ以外 {
    /* スタイルを維持してフォームを送信するための入力内容 */
    $("#search").submit();
  }
});
</スクリプト>

注: ここで jQuery をインポートする必要があります。忘れないでください。

拡大。

完全な HTML コード:

<!DOCTYPE html>
<html>
<ヘッド>
<タイトル></タイトル>
<meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ">
<link rel="スタイルシート" type="text/css" href="アイコンフォント/アイコンフォント.css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<スタイル タイプ="text/css">
体 {
  マージン: 0; パディング: 0;
  フォント サイズ: 14px; フォント ファミリ: "microsoft yahei",'Arial', 'Verdana','Helvetica', sans-serif;
}
。バー {
  position: fixed; top: 0; left: 0; right: 0; /* 検索ボックスを上部に固定するかどうかを決定します */
  高さ: 44px; パディング: 0 10px;
  background-color: #fff; opacity: 0.8; /*検索ボックスの半透明効果*/
  zインデックス: 10;
}
.bar フォーム {
  表示: ブロック; パディング: 0; マージン: 0;
}
.検索行{
  位置: 相対的;
  高さ: 30px; パディング: 7px 0;
}
.search-row 入力[type=search] {
  位置: 絶対; 上: 7px;
  高さ: 30px; 行の高さ: 21px; 幅: 100%; パディング: 10px 15px 10px 30px;
  境界線: 0; 境界線の半径: 6px; アウトライン: 0; 背景色: rgba(0,0,0,0.1);
  フォントサイズ: 16px; テキスト配置: 中央;
  zインデックス: 100;
}
.検索行 .プレースホルダー {
  位置: 絶対; 上: 2px; 左: 0; 右: 0;
  表示: インラインブロック; 高さ: 34px; 行の高さ: 34px;
  境界線: 0; 境界線の半径: 6px;
  フォントサイズ: 16px; テキスト配置: 中央; 色: #999;
  zインデックス: 1;  
}
.検索行 .プレースホルダー .アイコンフォント {
  表示: インラインブロック; 幅: 19px; 行の高さ: 24px; パディング: 10px 0; 
  フォントサイズ: 21px; 色: #666;
}
.検索行 .プレースホルダー .テキスト {
  行の高さ: 40px;
  垂直方向の位置合わせ: 上;
}
.背景画像{
  幅: 100%;
}
.active:before {
  位置: 絶対; 上: 11px; 左: 5px; 右: 自動;
  表示: ブロック; 右マージン: 0;
  フォントサイズ: 21px;
}
.active input[type=検索] {
  テキスト配置: 左
}
.アクティブ .プレースホルダー{
  表示: なし
}
</スタイル>
</head>
<本文>
<!-- 検索ボックス -->
<ヘッダークラス="bar">
  <フォーム名="検索" クラス="検索" id="検索" アクション="">
    <div class="検索行">
      <input type="検索" name="単語" id="単語">
      <span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">検索</span></span>
    </div>
  </フォーム>
</ヘッダー>
<!-- 背景画像はカルーセル画像であることが多い-->
<div class="背景">
  <img src="bg.jpg">
</div>
</本文>
<script type="text/javascript">
/* 入力ボックスにフォーカスが当たり、ユーザーが入力中であることを示します*/
$("#word").focusin(function() {
  $(".search-row").addClass("active iconfont icon-sousuo");
});
/* 入力ボックスのフォーカスが失われ、ユーザーが入力を終了したことを示します*/
$("#word").focusout(関数() {
  /* ユーザーが入力したコンテンツがあるかどうかを確認します*/
  ($(this).val()=="") の場合 {
    /* スタイルを変更するコンテンツ入力がありません*/
    $(".search-row").removeClass("active iconfont icon-sousuo");
  } それ以外 {
    /* スタイルを維持してフォームを送信するための入力内容 */
    $("#search").submit();
  }
});
</スクリプト>
</html>

要約する

上記は、モバイルで固定フローティング半透明検索ボックスを実現するための HTML の紹介です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: CSS 動的高さ遷移アニメーション効果の実装

>>: MySQL データベースの制約とデータテーブルの設計原則