应用css3和jquery完成可伸缩检索框

日期:2020-10-22 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

HTML

在必须置放检索条的网页页面中置放以下html编码,检索条#search_bar包括1个form#myform表单,表单中置放1个检索键入框#search,1个检索按钮.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;
}
});
});

该实际效果能够应用到挪动端新项目中,自然你还可以加上手动式拖动实际效果。