教你用JavaScript实现搜索展开

白发居士 · 发表于 2023-1-3 07:00:08

欢迎来的我的小院，恭喜你今天又要涨知识了！

案例内容

利用JavaScript实现搜索框的移动展开。

演示

学习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>小院里的霍大侠</title>
</head>
<body>
<img src="https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/magnifier-512.png">
<input type="text" placeholder="Search...">
</body>
</html>

复制代码

总结思考

学习点：
1、align-items：flex子项们相对于flex容器在垂直方向上的对齐方式
2、transition ：设置元素的过渡效果
3、cursor：定义了鼠标指针放在一个元素边界范围内时所用的光标形状
4、boder:none ：没有边框
5、outline:none ：去除输入框蓝框
6、transition-delay ：规定过渡效果何时开始
7、document.querySelector()返回一个元素的信息
8、element.classList.toggle：当点击标签时，会给这个标签添加或消除一个类
使用JavaScript完成搜索框的移动展开，可以使界面更加生动有趣，让网页更加多样化。
关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单..
全网可搜：小院里的霍大侠，免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信：huodaxia_xfeater
二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号：有个小院（微信公众号：yougexiaoyuan）
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）

来源:https://www.cnblogs.com/xFeater/p/17003878.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

教你用JavaScript实现搜索展开

本帖子中包含更多资源