本文介绍了如何用原生HTML、CSS和JavaScript简单实现搜索框的动态伸缩效果。当鼠标悬停时，搜索框会自动伸长，移开后收缩。JavaScript使用setInterval调整宽度，并在鼠标移开时根据是否有输入内容决定是否恢复原状。此外，还提到了添加输入光标的方法。
现在大多数的网站搜索框只是一个搜索的icon图，只有当你鼠标一上去的时候才会自动伸长输入搜索，移开时自动收缩
话不多说上代码
html部分使用icon和input两个部分，加上简单的css样式实现，如图
当你的鼠标移上去的时候，长度增加到自己想要的或者合适的长度即停止
js代码主要使用setInterval实现， width++反之--；同时添加当长度和时候自动添加输入光标由setTimeout+.focus()实现
当你鼠标移开时如果没有内容随机缩回，但是如果输入了内容此时就应该保持这是的样子
好了大概就是这样，如果有更多更好的方法可以实现欢迎邮箱交流：1677516357@qq.com
最低0.47元/天 解锁文章
扫一扫
794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
