js实现搜索框功能根据商品名跳转页面（教你用JavaScript实现搜索展开）

时间2025-04-29 01:53:18分类IT科技浏览3540

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

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

案例内容

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

演示

学习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>小院里的霍大侠</title> </head> <body> <div class="search-bar-container active"> <img class="magnifier" src="nfinder.com/data/icons/evil-icons-user-interface/64/magnifier-512.png"> <input type="text" class="input" placeholder="Search..."> </div> </body> <style> 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; } </style> <script> const searchBarContainerEI=document.querySelector(".search-bar-container"); const magnifierEI=document.querySelector(".magnifier"); magnifierEI.addEventListener("click",()=>{ searchBarContainerEI.classList.toggle("active"); }); </script> </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

二维码： https://www.yuucn.com/wp-content/uploads/2022/11/1669777238-fc7aa5051075c5b.jpg

公众号：有个小院（微信公众号：yougexiaoyuan）

github：yougexiaoyuan (视频源码免费获取)

（部分素材来源于互联网，如有保护请联系作者）