jQuery+HTML5实现弹出创意搜索框层
效果体验：http://demo.jb51.net/js/2016/sousuokuang_jb51/
本效果适用于移动设备，可以使用手机等浏览效果。
代码下载：http://xiazai.jb51.net/201612/yuanma/sousuokuang_jb51.rar
HTML代码如下：
<!doctypehtml> <htmllang="zh"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"> <metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <title>jQuery+CSS3创意搜索框特效-何问起</title> <linkrel="stylesheet"type="text/css"href="http://hovertree.com/texiao/jquery/26/css/default.css"/> <!--必要样式--> <linkrel="stylesheet"type="text/css"href="http://hovertree.com/texiao/jquery/26/css/search-form.css"/> </head> <body> <div> <ahref="http://hovertree.com/">首页</a><ahref="http://hovertree.com/texiao/">特效</a><ahref="http://hovertree.com/h/bjaf/sousuokuang.htm">原文</a> </div> <formonSubmit="submitFn(this,event);"name="yestop"> <divclass="search-wrapper"> <divclass="input-holder"> <inputtype="text"class="search-input"placeholder="请输入关键词"name="hewenqi"/> <inputtype="hidden"name="q"/> <buttonclass="search-icon"onClick="searchToggle(this,event);"><span></span></button> </div> <spanclass="close"onClick="searchToggle(this,event);"></span> <divclass="result-container"> </div> </div> </form> <scriptsrc="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"type="text/javascript"></script> <scripttype="text/javascript"src="http://hovertree.com/texiao/jquery/26/js/hovertreesearch.js"></script> </body> </html>
其中hovertreesearch.js的代码如下：
functionsearchToggle(obj,evt){
varcontainer=$(obj).closest('.search-wrapper');
if(!container.hasClass('active')){
container.addClass('active');
evt.preventDefault();
}
elseif(container.hasClass('active')&&$(obj).closest('.input-holder').length==0){
container.removeClass('active');
//clearinput
container.find('.search-input').val('');
//clearandhideresultcontainerwhenwepressclose
container.find('.result-container').fadeOut(100,function(){$(this).empty();});
}
}
functionsubmitFn(obj,evt){
varvalue=$(obj).find('.search-input').val().trim();
var_html="您搜索的关键词：";
if(!value.length){
_html="关键词不能为空。";
}
else{
window.open("http://cn.bi"+"ng.com/search?q=site%3Ahove"+"rtree.com"+value+"&hewenqi=yestop");
_html+="<b>"+value+"</b>";
}
$(obj).find('.result-container').html('<span>'+_html+'</span>');
$(obj).find('.result-container').fadeIn(100);
evt.preventDefault();
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！