Comment utiliser HTML pour créer un champ de recherche translucide flottant fixe sur mobile

Cette fois, je vais vous montrer comment utiliser HTML pour créer un champ de recherche translucide flottant fixe du côté mobile. Quelles sont les précautions pour créer un champ de recherche translucide flottant fixe du côté mobile en utilisant HTML. . Ce qui suit est un cas pratique.

Question. Question

Dans le système de centre commercial mobile, nous voyons souvent un champ de recherche en haut de la page. Les blogueurs de ce type de champ de recherche préfèrent le corriger en haut de la page. page, à moitié transparente et suspendue, une partie du carrousel est vaguement visible.

Pour créer un tel champ de recherche, la clé technique réside dans :

Positionnement fixe du champ de recherche

Transparence du paramètre d'opacité

Solution >Nous définissons d'abord. un fragment html :

La balise d'en-tête est le champ de recherche et le div ci-dessous est une image d'arrière-plan.

<!-- 搜索框 -->
<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>

Attachez le style CSS :

Un style CSS très long, mais son noyau n'est constitué que de deux phrases : position : fixe /* détermine le haut du champ de recherche*/ et background -color : #fff ; opacité : 0,8 ; /* Effet translucide du champ de recherche*/, les autres styles sont destinés à la mise en page, les détails de la mise en page doivent être écrits par les lecteurs pour comprendre, et le processus peut prendre un certain temps.

<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>

De cette façon, nous avons complété un champ de recherche statique :

Remarque : L'icône de recherche ici utilise iconfont. Les lecteurs peuvent la télécharger à partir de la bibliothèque d'icônes vectorielles iconfont.

À ce stade, nous devons encore implémenter quelques effets d'animation via JS :

est utilisé pour changer l'icône de position "recherche" lorsque l'utilisateur change de saisie. Le principe est très simple, ajoutez. et supprimez les classes de classe. Ces classes définissent des styles.

Remarque : jQuery doit être introduit ici, ne l'oubliez pas !

.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>

Extension. Extension

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture connexe :

Comment résoudre l'écart dans l'image en H5

Que faire si la forme H5 la vérification échoue

Comment utiliser localStorage et sessionStorage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!