HTML实现移动端固定悬浮半透明搜索框

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML实现移动端固定悬浮半透明搜索框
Question. 问题
在移动端商城系统中，我们常常看到位于页⾯顶部有⼀个搜索框，这类搜索框博主⽐较喜欢的是固定在页⾯顶部，半透明悬浮，能依稀看见部分轮播图的形式。

要制作这样的搜索框，技术关键在于：
fixed 搜索框定位
opacity 设置透明度
Solution. 解决
⾸先我们定义⼀个 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>
header 标签为搜索框，下⾯的 div 为⼀个背景图。

同时附上 CSS 样式：
<style type="text/css">
body {
margin: 0; padding: 0;
font-size: 14px; font-family: "microsoft yahei",'Arial', 'Verdana','Helvetica', 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 样式，但是其核⼼就两句话position: fixed; /* 决定了搜索框置顶 */ 和 background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */，其他的样式均为了页⾯的排版，排版的细节需要各位读者⾃⼰写⼀遍理解，过程可能需要花费点时间。

这样我们就完成了⼀个静态的搜索框：
备注：这⾥的搜索图标使⽤了 iconfont，读者可⾃⾏到 iconfont⽮量图标库下载。

⾄此，我们还需要通过 JS 实现⼀些动效：
⽤于实现⽤户切换输⼊时「搜索」位置图标的切换，原理很简单，增加和移除 class 类，这些类定义了样式。

.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. 扩展
完整 html 代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
body {
margin: 0; padding: 0;
font-size: 14px; font-family: "microsoft yahei",'Arial', 'Verdana','Helvetica', 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>
</head>
<body>

<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>
</body>
<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>
</html>
总结
以上所述是⼩编给⼤家介绍的HTML实现移动端固定悬浮半透明搜索框，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

在此也⾮常感谢⼤家对⽹站的⽀持！。