jquery可显示关闭的搜索框js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery可显示关闭的搜索框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery可显示关闭的搜索框</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=1200" />
<link href="css/global-base.css" rel="stylesheet" type="text/css" />
<script src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/vivo-common.js"></script>
<!--[if lte IE 8]>
	<link href="css/iefixed.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body class="products">
<div id="vivo-airbox"></div>
<div id="vivo-wrap">
  <div id="vivo-head">
    <div class="vivo-search">
      <div class="search-box">
        <form action='#' method='get'>
          <input type="text" placeholder="如:jquery插件" name='q' class='data_q' autocomplete="off"><button>搜索</button><a class="close"></a>
        </form>
        <div class="qk-results">
          <ul>
          </ul>
          <div class="other-results"><a href="#">其他搜索结果</a></div>
        </div>
      </div>
    </div>
    <div class="vivo-nav cl">

      <div class="search-user"><a href="#" class="search"><b></b></a><a href="#" class="user"><b></b></a></div>
    </div>
  </div>
</div>
<div id="vivo-contain"></div>
</body>
</html>

JS代码(vivo-common.js):

VIVO_UIMIX ={
	init:function(){
	var headBox=$("#vivo-head"),navBox=headBox.find(".vivo-nav"),searchBox=headBox.find(".vivo-search"),searchInput=searchBox.find("input"),searchBtn=navBox.find(".search-user a.search"),closeSearchBtn=searchBox.find("a.close"),isSearchClose=true,isMenuEnter=isCommEnter=false;
	closeSearchBtn.css({
	opacity:0}
);
	searchBox.on({
	mouseenter:function(){
	closeSearchBtn.animate({
	opacity:1}
,300);
}
,mouseleave:function(){
	closeSearchBtn.animate({
	opacity:0}
,300);
}
}
);
	searchBtn.on("click",function(){
	if(isSearchClose){
	searchBox.children().css({
	opacity:0}
);
	searchBox.css({
	display:"block",height:0}
).stop().animate({
	height:80}
,300);
	searchBox.children().stop().delay(300).animate({
	opacity:1}
,500);
	searchInput.focus().val("");
	$(this).addClass("current");
	isSearchClose=false;
}
else{
	searchBox.stop().animate({
	height:0}
,300,function(){
	$(this).css({
	display:"none"}
);
	isSearchClose=true;
}
);
	$(this).removeClass("current");
}
return false;
}
);
	closeSearchBtn.on("click",function(){
	searchBtn.click();
	return false;
}
);
}
}
;
	$(document).ready(function(){
	VIVO_UIMIX.init()}
);

CSS代码(iefixed.css):

/*Powered by uimix.com;date:2013-09-11;*/
/* service */
.download-box .dl-wall a.funos span img.focus{display:none;}
.download-box .dl-wall a.funos:hover span img.focus{display:block;}
.download-box .dl-wall a.video span img.focus{display:none;}
.download-box .dl-wall a.video:hover span img.focus{display:block;}
.dl-mobile-slide a.prev,.dl-mobile-slide a.next{display:none;}
.dl-mobile-slide a.prev.start,.dl-mobile-slide a.next.start{display:block;}
.dl-service .dl-service ul li{float:left;width:19%;}
/* choose mobile */
.choose-mb-nav ul li{*border-top-style:expression(this.previousSibling==null?'none':'solid');}

附件:下载该文件资源,减少时间成本(增值服务)