jquery实现可显示和关闭的搜索框特效是一款非常实用的功能,基本上任何网站也用得上,它不占用地方,只要用的时候才点击弹出来,虽然功能简单,但很实用,样式也很好看,
首先引用文件
<link href="css/global-base.css" rel="stylesheet" type="text/css">
<script src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/vivo-common.js"></script>
核心代码,点击显示、隐藏、透明、显示隐藏时间、js
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;
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791