基于Jquery和Css3代码制作可以缩放的搜索框


Posted in HTML / CSS onNovember 19, 2015

搜索条在我们网站是必不可少的,尤其是在有限的页面空间里,放置一个重要的搜索条是个难题,今天我将结合实例给大家介绍一下如何使用CSS3和jQuery来实现一个可伸缩功能的搜索条。

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;
}
});
});

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

以上代码比较简单,希望对大家学习jquery css3有所帮助。更多信息请持续关注三水点靠木网站,我们每天都有新的内容更新。

HTML / CSS 相关文章推荐
CSS3字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 #HTML / CSS
Css3圆角边框制作代码
Nov 18 #HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 #HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 #HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 #HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 #HTML / CSS
CSS3的resize属性使用初探
Sep 27 #HTML / CSS
You might like
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
用实例分析Python中method的参数传递过程
2015/04/02 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Python列表切片常用操作实例解析
2020/03/10 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
浪费资源的建议书
2014/03/12 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
导游词300字
2015/02/13 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
详解如何使用Nginx解决跨域问题
2022/05/06 Servers