jquery点击伸缩效果input搜索框
作者:佳明妈 来源:jquery特效 2012-06-08 人气:jquery点击伸缩效果input搜索框 调用说明:$.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。
此jquery特效代码不提供rar压缩包文件下载,因为没有图片和样式文件要下载,查看演示,把代码保存到本地即可。
jquery点击伸缩效果input搜索框由懒人建站收集整理,您可以自由传播,请主动带上本文链接
懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。
jquery点击伸缩效果input搜索框-最新评论