jQuery搜索框拉伸特效
jQuery 的搜索框拉伸特效,属于那种看起来简单但挺加分的小交互。用户一靠近搜索框,宽度就慢慢拉开,既直观又有点小惊喜,用起来还挺顺手的。
页面上用的就是最常见的,通过mouseenter
和mouseleave
事件,加上animate
方法来实现宽度变化。代码不多,逻辑也简单,适合前端新手练练手,老手也能快速集成。
再加点 UX 细节,比如点击聚焦、清空按钮、样式微调,整个体验就更完整了。用 jQuery 来写这些,优点是写得快,兼容性也还不错,缺点嘛,是现在主流框架用得少了,但小项目或老项目里还是好用的。
如果你有静态页面、展示站或者后台管理界面,想搞点小交互提提神,这种拉伸搜索框效果可以直接用。懒得自己敲也没事,下面几个资源里就有现成的可以参考:
对了,如果你还想加点自动补全、模糊搜索什么的,也可以再配合点 Ajax,继续扩展就行。
下载地址
用户评论