调用说明:$.focusblurmenu("#searchkey","300px","300"); 依次是$.focusblurmenu("input的ID","展开的宽度","自定义动画的时间");

我在代码狂人看到他的网站搜索框是这个点击伸缩效果input搜索框css3代码,看着还挺好玩, 很明显他根本就不兼容IE6、7、8,css3是个趋势不过想在中国普及那是N年后的事情了,目前要用这个帅帅的效果还得使用NX的jquery特效。

下面我们动手来制作这个效果,用脚趾头想一想,这个效果不需要重写,借用一下input失去焦点和获得焦点jquery焦点事件插件 稍作改造就OK了。

把input失去焦点和获得焦点jquery焦点事件插件的代码复制过来,插件名字改一下focusblurmenu。呵呵,添加一个jquery自定义动画$(this).animate({width:'+250px'}, "300").addClass("searchkeyblur");

input搜索框获得焦点样式由 类.searchkeyfocus 来控制,虽然css3有控制获得焦点样式,考虑兼容性此处不采用,css3的东西要学习要知道,但不一定要用。

jquery点击伸缩效果input搜索框的css样式基本写的比较丑陋一点点,不过里面一些必须的css样式已经写出来了,你要做的是在粉饰一下就很OK。