Web入门：JavaScript搜索展开

最新推荐文章于 2023-12-02 10:43:57 发布

小院里的霍大侠

最新推荐文章于 2023-12-02 10:43:57 发布

阅读量215

点赞数

分类专栏： Web编程入门文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/xFeater/article/details/128314503

版权

Web编程入门专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建搜索框的动态展开效果，重点学习了align-items、transition、cursor等CSS属性，以及document.querySelector()和classList.toggle()的JavaScript方法。通过这个案例，可以提升网页的交互性和趣味性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

欢迎来的我的小院，恭喜你今天又要涨知识了！
在这里插入图片描述

案例内容

利用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="https://cdn4.iconfinder.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完成搜索框的移动展开，可以使界面更加生动有趣，让网页更加多样化。

关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单…

全网可搜：小院里的霍大侠，免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）