教你用JavaScript实现搜索展开

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

案例内容

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

演示

学习

                  
                        body {      margin: 0;      display: flex;      justify-content: center;      height: 100vh;      align-items: center;      background-color: aliceblue;    }    .search-bar-container{      display: flex;      align-items: center;      background-color: aliceblue;      padding: 5px;      width: 300px;      height: 50px;      border-radius: 50px;      box-shadow: 6px 6px 10px rgba(0,0,0,0.2),-6px -6px 10px rgba(255,255,255,0.7);      margin: 10px;      position: relative;      transition: width 1.5s;    }    .magnifier{      width: 25px;      cursor: pointer;      position: absolute;      left: 20px;    }    .input{      background-color: transparent;      border: none;      margin: 10px 50px;      width: 100%;      outline: none;      color: rgb(100,100,100);      transition: width 1s;      transition-delay: 0.5s;    }    .active.search-bar-container{      width: 50px;    }    .active.input{      width: 0;    }        const searchBarContainerEI=document.querySelector(".search-bar-container");    const magnifierEI=document.querySelector(".magnifier");    magnifierEI.addEventListener("click",()=>{      searchBarContainerEI.classList.toggle("active");    });  

总结思考

学习点：
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 (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）