So erstellen Sie mithilfe von HTML ein festes, schwebendes, durchsichtiges Suchfeld auf dem mobilen Endgerät

Dieses Mal zeige ich Ihnen, wie Sie mit HTML ein festes, schwebendes, durchsichtiges Suchfeld auf der mobilen Seite erstellen. Welche Vorsichtsmaßnahmen gibt es, um mit HTML ein festes, schwebendes, durchsichtiges Suchfeld auf der mobilen Seite zu erstellen? . Das Folgende ist ein praktischer Fall.

Frage.

Im mobilen Mall-System sehen wir oft ein Suchfeld oben auf der Seite Seite, halb transparent und aufgehängt, ein Teil des Karussells ist undeutlich zu erkennen.

Um ein solches Suchfeld zu erstellen, liegt der technische Schlüssel in:

Feste Positionierung des Suchfelds

Deckkrafteinstellungstransparenz

Zuerst definieren wir ein HTML-Fragment:

Das Header-Tag ist das Suchfeld und das Div darunter ist ein Hintergrundbild.

<!-- 搜索框 -->
<header class="bar">
  <form name="search" class="search" id="search" action="">
    <div class="search-row">
      <input type="search" name="word" id="word">
      <span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">搜索</span></span>
    </div>
  </form>
</header>
<!-- 一个背景图 实际上这里往往是轮播图 -->
<div class="background">
  <img src="bg.jpg">
</div>

Fügen Sie den CSS-Stil hinzu:

Ein sehr langer CSS-Stil, dessen Kern jedoch nur aus zwei Sätzen besteht: position: behoben; /* bestimmt den oberen Rand des Suchfelds*/ und Hintergrund -Farbe: #fff; Deckkraft: 0,8; /* Durchscheinender Effekt des Suchfelds*/, andere Stile gelten für das Seitenlayout, die Details des Layouts müssen vom Leser geschrieben werden, und der Vorgang kann einige Zeit dauern.

<style type="text/css">
body {
  margin: 0;  padding: 0;
  font-size: 14px; font-family: "microsoft yahei",&#39;Arial&#39;, &#39;Verdana&#39;,&#39;Helvetica&#39;, sans-serif;
}
.bar {
  position: fixed; top: 0; left: 0; right: 0; /* 决定了搜索框置顶 */
  height: 44px; padding: 0 10px;
  background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */
  z-index: 10;
}
.bar form {
  display: block; padding: 0;margin: 0;
}
.search-row {
  position: relative;
  height: 30px; padding: 7px 0;
}
.search-row input[type=search] {
  position: absolute; top: 7px;
  height: 30px; line-height: 21px; width: 100%; padding: 10px 15px 10px 30px;
  border: 0; border-radius: 6px; outline: 0; background-color: rgba(0,0,0,0.1);
  font-size: 16px; text-align: center;
  z-index: 100;
}
.search-row .placeholder {
  position: absolute; top: 2px; left: 0; right: 0;
  display: inline-block; height: 34px; line-height: 34px;
  border: 0; border-radius: 6px;
  font-size: 16px; text-align: center; color: #999;
  z-index: 1; 
}
.search-row .placeholder .iconfont {
  display: inline-block; width: 19px; line-height: 24px; padding: 10px 0;
  font-size: 21px; color: #666;
}
.search-row .placeholder .text {
  line-height: 40px;
  vertical-align: top;
}
.background img {
  width: 100%;
}
.active:before {
  position: absolute; top: 11px; left: 5px; right: auto;
  display: block; margin-right: 0;
  font-size: 21px;
}
.active input[type=search] {
  text-align: left
}
.active .placeholder{
  display: none
}
</style>

Auf diese Weise haben wir ein statisches Suchfeld fertiggestellt:

Hinweis: Das Suchsymbol hier verwendet Iconfont. Leser können es aus der Iconfont-Vektorsymbolbibliothek herunterladen.

An diesem Punkt müssen wir noch einige Animationseffekte über JS implementieren:

wird verwendet, um das Positionssymbol „Suchen“ zu wechseln, wenn der Benutzer die Eingabe wechselt. Das Prinzip ist sehr einfach und Klassenklassen entfernen. Diese Klassen definieren Stile.

Hinweis: jQuery muss hier eingeführt werden, vergessen Sie es nicht!

.active:before {
  position: absolute; top: 11px; left: 5px; right: auto;
  display: block; margin-right: 0;
  font-size: 21px;
}
.active input[type=search] {
  text-align: left
}
.active .placeholder{
  display: none
}
<script type="text/javascript">
/* 输入框获取到焦点 表示用户正在输入 */
$("#word").focusin(function() {
  $(".search-row").addClass("active iconfont icon-sousuo");
});
/* 输入框失去焦点 表示用户输入完毕 */
$("#word").focusout(function() {
  /* 判断用户是否有内容输入 */
  if ($(this).val()=="") {
    /* 没有内容输入 改变样式 */
    $(".search-row").removeClass("active iconfont icon-sousuo");
  } else {
    /* 有内容输入 保持样式 并提交表单 */
    $("#search").submit();
  }
});
</script>

Erweiterung. Erweiterung

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So lösen Sie die Lücke im Bild in H5

Was tun, wenn sich H5 bildet? Verifizierung schlägt fehl

So verwenden Sie localStorage und sessionStorage

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mithilfe von HTML ein festes, schwebendes, durchsichtiges Suchfeld auf dem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!