使用CSS3和jQuery制作可伸缩的搜索条

搜索条在我们网站是必不可少的,尤其是在有限的页面空间里,放置一个重要的搜索条是个难题,今天我将结合实例给大家介绍一下如何使用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;         }     }); }); 

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索搜索
, 代码
, position
, width
, px
, 一个
, jquery搜索关键词
, jquery页面搜索
菜单伸缩动画
jquery 搜索伸缩、css3伸缩布局、css3伸缩布局盒模型、css3伸缩布局画骰子、css3伸缩盒子,以便于您获取更多的相关知识。

时间: 2024-11-01 14:50:26

使用CSS3和jQuery制作可伸缩的搜索条的相关文章

16 个使用 CSS3 和 jQuery 制作的加载中动画

spin.js CSS3 Loading Animation Loop CSS3 Loading Animation CanvasLoader Creator Flickr Style Loading Animation Using JQuery CSS Loading Animation Circle Style Loading CSS spinners and bars generator for AJAX & JQuery Ajax Style Loading Animation in C

15个CSS3和jQuery的超棒页面过渡效果教程

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 CSS3和jQuery从根本上改变了网页设计和程序开发.通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你快速完成任务.CSS3和jQuery最 大的方便之处在于网上有大量的不同元素效果的展示教程,这一点使得学习新技巧 和创造一些很棒的内容更加轻松.网上有很多页面过渡效果展示

CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果

花瓣网以前的菜单效果还不错,首先是展示出全部的菜单,然后当你向下滑动网页的时候,菜单自动吸顶固定悬浮在浏览器的顶部,这个用户也能很好的切换不同的分类,查看更多的内容,而对于网站来说,也提升了不少的用户体验和交互性. 制作方法 本文将来为大家简单的介绍一下如何制作出这样的效果. HTML代码 首先我们编写一些基本的HTML代码,分别给网站的LOGO定义一个#header类,给菜单定义.nav类. <div id="header"><h1>花瓣</h1>

jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图

 本文给大家分享的是使用jQuery结合CSS3制作的仿猎豹浏览器宽屏banner焦点图特效,代码很简单,效果却非常棒,而且兼容各大浏览器,这里推荐给大家,有需要的小伙伴参考下.     jQuery结合css3动画属性制作猎豹浏览器宽屏banner焦点图切换支持手机触屏滑动焦点图切换代码   代码如下: <div class="slide-main" id="touchMain"> <a class="prev" href=&

jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图_jquery

jQuery结合css3动画属性制作猎豹浏览器宽屏banner焦点图切换支持手机触屏滑动焦点图切换代码 复制代码 代码如下: <div class="slide-main" id="touchMain">     <a class="prev" href="javascript:;" stat="prev1001"><img src="images/l-btn.png

jQuery制作效果超棒的手风琴折叠菜单_jquery

拉风的jQuery制作的手风琴折叠菜单,效果非常不错!这里是之前版本的改进版,主要是jquery代码改进 演示图: main.js $(function(){ var tmp = null, $title = $('.title'), $con = $('.title > ul'); $title.click(function(){ $(tmp).children('ul').slideUp().end().children('.arrow').removeClass('arrow-up');

jQuery制作商城购物车自动计算金额表单

非常实用的一款jQuery制作商城购物车自动计算金额表单代码,可以计算多项物品总价. function IsNumeric(sText) { var ValidChars = "0123456789."; var IsNumber=true; var Char; for (i = 0; i < sText.length && IsNumber == true; i++) { Char = sText.charAt(i); if (ValidChars.indexO

10个详细的CSS3表单制作教程

CSS3在国外应用已经很广泛了,所以我们也应该尽快学会使用CSS3,下面有10个CSS3的教程,非常详细,而且配合jQuery使用,使得用户体验增强不少,做为前端的你,应该抽点时间看看,百利而无一害. HTML5 & CSS3 form <img src="http://www.alixixi.com/web/UploadPic/2014-4/2014428114027484.jpg" border="0" alt="" hspac

用CSS和jQuery制作霓虹效果

今天我们为大家准备的JS+CSS霓虹灯效果,让你的文字像灯一样每一分每一秒都变色. 今天我们要用CSS和jQuery制作霓虹效果.现在我们开始第一步,制作一个背景.其中有2个不同颜色的文字版本.要生成五颜六色的背景图象,您首先需要新建的Photoshop文件650px和300px文档,#141414的背景颜色. 使用您喜爱的字体写您的标题. 我使用了哥特式的世纪与60px的大小.然后Ctrl点击他,变成选区. 使用矩形工具,按Shift+Alt选择文本,如下图: 然后复制出一个新的图层: 在用具