巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

基于Jquery和Css3代码建造能够或许缩放的搜刮框

一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-21 17:24:57 阅读数: 100

搜刮条在咱们网站是必不可少的,特别是在无限的页面空间里,安排一个主要的搜刮条是个困难,明天我将连系实例给大师先容一下若何利用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有所赞助。更多信息请延续存眷网页设想网站,咱们天天都有新的内容更新。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干动静more

30
03月
微信小法式为甚么会火?

简介:此刻这个社会,咱们都已习气有手机的糊口,天天起床的第一件事不是洗漱,而是看手机,看微信。咱们惧怕错过任何一个动静,惧怕迟误任何有关工... >>概况

01
05月
若何利用剧本仿照登岸进程

检查他的登岸页面的代码,看他提交到哪一个页面,变量是甚么。复制代码 代码以下:<formmethod="post"action="log... >>概况

20
04月
HTML5 拖放功效完成代码

在HTML5中,拖放是规范的一局部,任何元素都能够或许拖放,详细内容以下1、拖放XML/HTML Code复制内容到剪贴板 <!DO... >>概况

23
04月
centos iso镜像文件装置教程

本文为大师分享了centos iso镜像文件的装置教程,供大师参考,详细内容以下1.挂载iSO镜像(先翻开VM 挑选假造机————>设... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站