집 > 기사 > 웹 프론트엔드 > HTML을 사용하여 모바일 단말기에 고정된 부동 반투명 검색 상자를 만드는 방법

HTML을 사용하여 모바일 단말기에 고정된 부동 반투명 검색 상자를 만드는 방법

php中世界最好的语言원래의: 2018-01-16 09:37:383685검색

이번에는 HTML을 사용하여 모바일 측에서 고정된 부동 반투명 검색 상자를 만드는 방법을 보여 드리겠습니다. HTML을 사용하여 모바일 측에서 고정된 부동 반투명 검색 상자를 만드는 방법은 다음과 같습니다. 사례를 살펴보겠습니다. Question.

모바일 몰 시스템에서는 페이지 상단에 검색창이 있는 것을 종종 볼 수 있는데, 블로거들은 이러한 유형의 검색창이 페이지 상단에 고정되어 있고, 반투명하고 정지되어 있는 것을 선호합니다. 바퀴의 일부가 방송 사진의 형태로 보입니다.

이러한 검색 상자를 만들기 위한 기술적 핵심은 다음과 같습니다.

고정 검색 상자 위치

불투명도 설정 투명도

솔루션

먼저 HTML 조각을 정의합니다.

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

헤더 레이블은 검색 상자입니다. div를 배경 이미지로 따릅니다.

첨부된 CSS 스타일은 다음과 같습니다.

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

매우 긴 CSS 스타일이지만 핵심은 두 문장에 불과합니다. 위치: /*는 검색 상자의 상단을 결정합니다*/ 및 배경색: #fff; : 0.8; /*검색 상자 반투명 효과*/, 다른 스타일은 페이지 레이아웃을 위한 것입니다. 레이아웃의 세부 사항은 독자가 작성하고 이해해야 하며 프로세스에는 시간이 걸릴 수 있습니다.

이런 방식으로 정적 검색 상자가 완성되었습니다.

참고: 여기의 검색 아이콘은 아이콘 글꼴을 사용합니다. 독자는 아이콘 글꼴 벡터 아이콘 라이브러리에서 다운로드할 수 있습니다.

이 시점에서 JS를 통해 몇 가지 애니메이션 효과를 구현해야 합니다.

사용자가 입력을 전환할 때 "검색" 위치 아이콘을 전환하는 데 사용됩니다. 이 클래스는 매우 간단합니다. 스타일을 정의합니다.

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

참고: 여기에 jQuery를 도입해야 합니다. 잊지 마세요!

Extension.Extension

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에서 다른 관련 기사를 주목해 보세요.