使用css3和jquery实现可伸缩搜索框


Posted in HTML / CSS onFebruary 12, 2014

HTML

在需要放置搜索条的页面中放置如下html代码,搜索条#search_bar包含一个form#myform表单,表单中放置一个搜索输入框#search,一个搜索按钮.search_btn以及搜索按钮图标.search_ico。
 

复制代码
代码如下:

<div id="search_bar" class="search_bar">
<form id="myform">
<input class="input" placeholder="想搜点什么呢..." type="text" name="key" id="search">
<input class="search_btn" type="submit" value="">
<span class="search_ico"></span>
</form>
</div>

CSS

我们通过CSS来将整个搜索条布局美化,其中我们使用了CSS3代码。
 

复制代码
代码如下:

.search_bar{position: relative;margin-top: 10px;
width: 0%;min-width: 60px;height: 60px;
float: right;overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
background:#162934;
}

.input{
position: absolute;top: 0;right: 0;
border: none;outline: none;
width: 98%;height: 60px; line-height:60px;z-index: 10;
font-size: 20px;color: #f9f9f9;background:transparent
}

.search_ico,.search_btn {
width: 60px;height: 60px;display: block;
position: absolute;right: 0;top: 0;
padding: 0;margin: 0;line-height: 60px;cursor: pointer;
}

.search_ico{background: #e67e22 url(icon.png) no-repeat 18px 20px;z-index:90;}
.search_open{width: 100% !important; z-index:1002}
#show{position:absolute; padding:20px}

上述代码中关键的是transition: width 0.3s可以实现CSS3的动画效果,width由0变成100%,具体大家可以去看下CSS3手册相关介绍,这里不多描述,你可以直接复制和修改代码应用到你的项目中去。

jQuery

当点击搜索按钮时,搜索条.search_bar通过toggleClass()切换样式.search_open,这就实现了搜索条收缩和伸展功能。另外我们还需要判断输入情况,当输入满足条件时,提交搜索表单实现搜索功能,请看代码:
 

复制代码
代码如下:

$(function(){
$(".search_ico").click(function(){
$(".search_bar").toggleClass('search_open');
var keys = $("#search").val();
if(keys.length>2){
$("#search").val('');
$("#myform").submit();
}else{
return false;
}
});
});

该效果可以运用到移动端项目中,当然你也可以添加手动滑动效果。

HTML / CSS 相关文章推荐
CSS3属性选择符介绍
Oct 17 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 #HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 #HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 #HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 #HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 #HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 #HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 #HTML / CSS
You might like
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
中专生自我鉴定书范文
2013/12/28 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
保险公司早会主持词
2014/03/22 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
春节随笔
2015/08/15 职场文书
《海上日出》教学反思
2016/02/23 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
德劲DE1102数字调谐收音机机评
2022/04/07 无线电