知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    jquery点击伸缩效果input搜索框

    作者:佳明妈 来源:jquery特效 2012-06-08 人气:
    jquery点击伸缩效果input搜索框这个效果不需要重写,借用一下input失去焦点和获得焦点jquery焦点事件插件 稍作改造就OK了。input搜索框获得焦点样式由 类.searchkeyfocus 来控制

    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搜索框-最新评论