Effect Experience: http://hovertree.com/texiao/jquery/26/
This effect applies to mobile devices, you can use the mobile phone and other browsing effects.
Code Download: http://hovertree.com/h/bjaf/e14uccpw.htm
The HTML code is as follows:
1 <!DOCTYPE HTML>2 <HTMLLang= "zh">3 <Head>4 <MetaCharSet= "UTF-8">5 <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1">6 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no" />7 <title>JQUERY+CSS3 Creative Search Box effects-what to ask</title>8 <Linkrel= "stylesheet"type= "Text/css"href= "Http://hovertree.com/texiao/jquery/26/css/default.css" />9 <!--Necessary Styles -Ten <Linkrel= "stylesheet"type= "Text/css"href= "Http://hovertree.com/texiao/jquery/26/css/search-form.css" /> One A </Head> - <Body> - <Div> the <ahref= "http://hovertree.com/">Home</a> <ahref= "http://hovertree.com/texiao/">Effects</a> <ahref= "Http://hovertree.com/h/bjaf/sousuokuang.htm">Original</a> - </Div> - <formOnSubmit= "SUBMITFN (this, event);"name= "Yestop"> - <Divclass= "Search-wrapper"> + <Divclass= "Input-holder"> - <inputtype= "text"class= "Search-input"placeholder= "Please enter keywords"name= "Hewenqi" /> + <inputtype= "hidden"name= "Q" /> A <Buttonclass= "Search-icon"OnClick= "Searchtoggle (this, event);"><span></span></Button> at </Div> - <spanclass= "Close"OnClick= "Searchtoggle (this, event);"></span> - <Divclass= "Result-container"> - - </Div> - </Div> in </form> - to <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> the </HTML>
The code for Hovertreesearch.js is as follows:
1 functionsearchtoggle (obj, evt) {2 varContainer = $ (obj). Closest ('. Search-wrapper '));3 4 if(!container.hasclass (' active ')) {5Container.addclass (' Active ');6 Evt.preventdefault ();7 }8 Else if(Container.hasclass (' active ') && $ (obj). Closest ('. Input-holder '). Length = = 0) {9Container.removeclass (' Active ');Ten //Clear Input OneContainer.find ('. Search-input '). Val (' '); A //clear and hide result container when we press close -Container.find ('. Result-container '). FadeOut (100,function() { $( This). empty (); }); - } the } - - functionsubmitfn (obj, evt) { - varValue = $ (obj). Find ('. Search-input ')). Val (). Trim (); + - var_html = "keywords you searched for:"; + if(!value.length) { A_html = "keyword cannot be empty. "; at } - Else { -window.open ("Http://cn.bi" + "Ng.com/search?q=site%3ahove" + "rtree.com" + value + "&hewenqi=yestop"); -_html + = "<b>" + value + "</b>"; - } - in$ (obj). Find ('. Result-container '). html (' <span> ' + _html + ' </span> ')); -$ (obj). Find ('. Result-container '). FadeIn (100); to + Evt.preventdefault (); -}
More Effects: http://www.cnblogs.com/roucheng/p/texiao.html
JQUERY+HTML5 pop up creative search box layer