置顶的搜索框html,HTML实现移动端固定悬浮半透明搜索框
原标题:HTML实现移动端固定悬浮半透明搜索框
在移动端商城系统中,我们常常看到位于页面顶部有一个搜索框,这类搜索框博主比较喜欢的是固定在页面顶部,半透明悬浮,能依稀看见部分轮播图的形式。
要制作这样的搜索框,技术关键在于:
fixed 搜索框定位
opacity 设置透明度
Solution. 解决
首先我们定义一个 html 片段:
搜索
header 标签为搜索框,下面的 div 为一个背景图。
同时附上 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
}
很长的一段 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
}
< type="text/java">
/* 输入框获取到焦点 表示用户正在输入 */
$("#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();
}
});
>
备注:这里需要引入 jQuery,千万别忘了!
Extension. 扩展
完整 html 代码:
< type="text/java" src="jquery-1.11.1.min.js">>
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
}
搜索
< type="text/java">
/* 输入框获取到焦点 表示用户正在输入 */
$("#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();
}
});
>
建站免费素材下载:sucaiq.com
如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对素材圈的支持!若你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!返回搜狐,查看更多
责任编辑:
置顶的搜索框html,HTML实现移动端固定悬浮半透明搜索框相关推荐
- QT实现窗口置顶、置顶状态切换、多窗口置顶优先关系
我们使用QT进行界面开发时,可能会遇到需要将窗口置顶的情况.最常见的就是,需要制作一个悬浮工具栏,悬浮菜单,甚至是悬浮的画板.这就意味这我们需要将这个窗口置顶于"系统"以及我们自己 ...
- Layui 设置多个穿梭框,并增加上移下移置顶置底功能
Layui 设置多个穿梭框,并增加上移下移置顶置底功能 介绍 针对layui穿梭框进行了一些修改,增加上移下移置顶置底功能,设置了右侧框的排序功能,按序取值,按序加载的功能. 基于layui 2.5. ...
- 弹出框 每次打开 滚动条置顶_微信置顶文字怎么弄?微信置顶一句话教程
今日支付宝红包 支付宝首页搜索511501453 马上领取红包 (支付宝双十二活动,瓜分15亿红包) (领取后一定要记得使用,不然会浪费的呦, 更会影响第二天的领取!) 奶思靓机 " 一 个 ...
- maptalks常见操作——图层置顶置底、添加清空图层、添加标注、切换底图、添加缩放工具、事件监听(点击面出弹框)、右键菜单、绘制mark、锁定视角
maptalks常见操作--图层置顶置底.添加清空图层.添加标注.切换底图.添加缩放工具.事件监听(点击面出弹框).右键菜单.绘制mark.锁定视角 1.图层置顶 置底 layer.show().br ...
- html中怎么置顶文本框,如何同时选中多个文本框
ppt中如何同时选中多个文本框?我说的不是全部文本解决ppt中如何同时选中多个文本框的步骤如下: 1.首先,我们打开我们的电脑,然后我们打开我们电脑上面的ppt: 2.之后我们可以看到里面有很多的文本 ...
- 99%品牌梦寐以求的爆款流量,小红书笔记搜索排名置顶黑科技!
距离双十一不到半个月的时间,小红书品牌笔记投放的蓄水期和冲刺期即将结束,还有哪些值得争夺的爆款流量呢?头部品牌商家不约而同选择了优质种草笔记搜索排名优化和置顶. ▌笔记搜索排名置顶的重要性 笔记搜索排 ...
- ag-grid 学习笔记三:ag-grid设置(定义列、选择行、复选框、设置行高列宽、置顶合计行、底部合计行、行组、客户端排序)
目录 一 定义列 二 选择行 三 设置复选框 四 设置行高列宽 五 置顶合计行 六 底部合计行 七 行组 八 客户端排序 一 定义列 表格的列有如下常用属性. 名称 说明 headerName 显示的 ...
- html中置顶的命令行是啥,html之长文本框置顶
方法: 在 中添加如下代码: 点我返回顶部 整体示例代码如下: 方法: 在 中添加如下代码: 点我返回顶部 整体示例代码如下: var x = navigator; document.write(&q ...
- android imageview 锯齿,[置顶] android 自定义圆角ImageView以及锯齿的处理
看到很多人开发过程中要使用圆角图片时,解决方法有: 1.重新绘制一张图片 2.通过布局来配置 3.通过重写View来实现 其中1,2在这里就不讲了,重点讲讲方法三的实现. 实现一:通过截取画布一个圆形 ...
最新文章
- cpickle安装_Py之h5py:Python库之h5py库的简介、安装、使用方法详细攻略
- Web前端培训:有哪些好用的前端开发工具呢?
- 单片机IO口模拟串口程序(发送+接收
- 计算机上没有启动程序怎么办,Win7开机不加载启动项怎么办
- 面试官系统精讲Java源码及大厂真题 - 41 突破难点:如何看 Lambda 源码
- (八)用于人脸识别的Web API
- 手机端网页开发的两个重要设置
- Java JDK下载安装及环境配置超详细图文教程
- 基于树莓派的遥控开锁装置
- 《东周列国志》第九十回 苏秦合纵相六国 张仪被激往秦邦
- objectc foundation class hierachy
- 集线器和交换机的区别
- 如何关闭eslint相关规则
- 自定义流式布局的代码实现
- 吴忌寒革职詹克团,强势回归被称“矿圈乔布斯”
- 心愿未了有牵绊。生命不息,折腾未止。
- 广东省电子商务认证有限公司
- 老农的计算机学习笔记(一)计算机的诞生及其基础
- ios iPhone的 自带输入法emoji编程
- 联想小新padpro和华为matepad10.4哪个好有什么区别 详细性能配置对比
热门文章
- 实战操作——一次简单的逆向分析破解锁机软件
- 深圳大学计算机读研怎么样,深圳大学考研难吗?一般要什么水平才可以进入?...
- spring session、spring security和redis整合的简单使用
- html在ie11乱码,IE1 0、 IE11页面中文乱码
- 南卡骨传导耳机斩获缪斯国际设计大奖,成为中国品牌影响力的代表
- CentOS7:ifconfig command not found解决
- Phoenix FD火凤凰插件是什么?哪个动画云渲染农场支持渲染?
- 微信小程序客服系统怎么使用?小程序客服消息有没有什么限制?
- WhatsApp受众画像概述
- Nmap使用教程 - 一