QQ 1640076782

2014年08月29日

Jquery 响应式搜索框，鼠标经过/离开时，自动显示/隐藏搜索框

Filed under: 英语网站设计 — 标签：, — lifengwu @ 3:36 上午

在外贸网站建设中，搜索是每个网站必备的一个功能，尤其是英语购物网站更是如此，因为购物网站的信息量比较大，而大多数的搜索都要求客户能一眼找到，这就导致一个搜索就需要占据一个较大的位置，有时候客户需要在抢眼的位置显示其他更重要的信息，那么搜索又不能没有，这时通过jquery实现的响应式搜索就能完美解决这个问题，占据较小的位置，客户需要时就显示出来，客户不需要时隐藏，下面我们来看看实现方法：

首先我们需要引用jquery.js,这个可以直接在网上下载，不多说；

<div id=”masthead_search”>
<form id=”header-search-form” method=”get” name=”search” action=”/s/”>
<input id=”keywords” name=”search” value=”Enter a product or brand” autocomplete=”off” size=”18″ type=”text”>
<input value=”Search” id=”search_submit_button” type=”submit”>
</form>
</div>

此外还需要引用search.js,代码比较多,其中的一部分代码：
var $j=jQuery;if(jQuery.browser.msie&&parseInt(jQuery.browser.version)==6)
{alert(‘Sorry, your browser (Internet Explorer 6) is not supported. Please upgrade to a modern browser like Google Chrome or Firefox.’);}
if(jQuery.browser.msie&&typeof console!=’function’)
{var console={};console.log=function(logmsg){};}
function isMobile()
{var ua=navigator.userAgent.toLowerCase();var isAndroid=ua.indexOf(“android”)>-1;var isiOS=(ua.indexOf(“iphone”)||ua.indexOf(“ipad”)||ua.indexOf(“ipod”))>-1;return(isAndroid||isiOS);}
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind(“mousemove”,track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type==”mouseenter”){pX=ev.pageX;pY=ev.pageY;$(ob).bind(“mousemove”,track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).unbind(“mousemove”,track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.bind(‘mouseenter’,handleHover).bind(‘mouseleave’,handleHover)}})(jQuery);
搜索框和搜索按钮代码，这里的名称可以修改，不过要保证和后来JS里面的名称一致就行，当然按钮和搜索框样式可根据自己的实现需要进行调整。

默认效果：

鼠标经过按钮时的效果：

鼠标点击搜索框以后：
鼠标离开搜索框以后，搜索框会自动收缩
总体来说这个效果还是很实用的，如果你有更好的方法欢迎留言交流！