教你用JavaScript实现搜索展开
欢迎来的我的小院,恭喜你今天又要涨知识了!
案例内容
利用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完成搜索框的移动展开,可以使界面更加生动有趣,让网页更加多样化。
关注我,跟着我每天学习一点点,让你不在枯燥,不在孤单..
全网可搜:小院里的霍大侠, 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信:huodaxia_xfeater
二维码: http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号:有个小院(微信公众号:yougexiaoyuan)
github:yougexiaoyuan (视频源码免费获取)
(部分素材来源于互联网,如有保护请联系作者)
教你用JavaScript实现搜索展开的更多相关文章
- 5分钟教你学会JavaScript正则表达式
正则表达式在实际开发过程中和技术面试过程中的重要性不言而喻,本文仅仅只是教你如何在几分钟之类学会正则表达式,对于它的原理及运行机制不做介绍. 第一:什么是正则 正则表达式是一种用来描述一定数量文本的模 ...
- JavaScript之搜索框
啧啧啧,又到月末了,时间过的真的好快啊︿( ̄︶ ̄)︿现在没课上,天天宅在寝室就这么三件事:吃饭睡觉打豆豆.真感无所事事,无聊至极!突然好怀念那些上课的日子啊!至少不像现在,生活状态全部都搅乱了:以前可 ...
- ArcGIS API for javascript中搜索框的使用问题
我们在开发中常常需要用搜索框去搜索地图上的某个数据,然后在地图上显示出来.这个时候我们要用到esri.dijit.Search().在设置里面的sources的时候,需要注意一点:必须要使用在线的fe ...
- JavaScript表格搜索高亮功能模拟
在网页表格中模拟excle的搜索高亮显示功能.当在搜索框中输入需要的姓名时,若表格中存在对应的数据,则该表格背景色变为黄色. 下面为表的HTML源码: <!doctype html> &l ...
- JavaScript实现搜索联想功能
-.虽然Jquery已经有了一个完整的包 实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性 回想起来 实现此功能很简单,1.前端输入字符串 文本改变 异步请求服务器 将返回的资料显示 ...
- 基于前端javascript的搜索功能
发表于 2013/11/07 当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享: 功能描述: 按下键盘后及时搜索条 ...
- Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释
前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...
- JavaScript文本收缩展开 showdetail
原文发布时间为:2009-11-15 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- 写博客没高质量配图?python爬虫教你绕过限制一键搜索下载图虫创意图片!
目录 前言 分析 理想状态 爬虫实现 其他注意 效果与总结 @(文章目录) 前言 在我们写文章(博客.公众号.自媒体)的时候,常常觉得自己的文章有些老土,这很大程度是因为配图没有选好. 笔者也是遇到相 ...
- javascript兼容性:展开运算符 ... 的降级
展开运算符 ... 是一个很好用的ES6新特性,用的好的话,可以节约很多代码. 但是作为ES6特性,它有兼容性问题,而且Babal(在线转码网页)并不会转换展开运算符. 展开运算符大体分为两种用法:展 ...
随机推荐
- 【调试】netconsole的使用
开发环境 客户端 开发板:FireFly-RK3399 Linux 4.4 IP:192.168.137.110 服务端 VMware Workstation Pro16,ubuntu 18.04 I ...
- 基于 SpringBoot + Vue3.2 + Element Plus 的后台管理系统
简介 TANSCI 基于 SpringBoot + Vue3.2 + Element Plus 的后台管理系统. 包含基础模块:菜单管理.角色管理.组织管理.用户管理.字典管理.日志管理(操作日志.异 ...
- MySQL 及调优
存储引擎的种类 MySQL 中存在多种存储引擎,比如: InnoDB 支持事务: 支持外键: 同时支持行锁和表锁. 适用场景:经常更新的表,存在并发读写或者有事务处理的业务场景. MyISAM 支持表 ...
- wireshark 显示过滤表达式
转载请注明出处: 1.根据协议过滤: 在显示过滤表达式的输入框中直接输入对应的协议类型即可:http tcp udp 2.根据 IP 过滤: 根据源IP地址过滤:如源地址IP为:127.0.0. ...
- IDEA中无法调出中文输入法?
参考链接:idea写代码时无法切换到中文输入
- Error adding module to project: null I(IDEA创建maven项目时遇到此提示)
1.问题 在已创建一个springboot项目的时候,想要再增添一个Maven项目,发生报错 2.解决 根本原因是创建maven模块时选择的sdk版本过高(选用了openjdk19).选用jdk1.8 ...
- Oracle实例的启动和关闭
启动模式 1.NoMount 模式(启动实例不加载数据库) 命令:startup nomount 讲解:这种启动模式只会创建实例,并不加载数据库,Oracle仅为实例创建各种内存结构和服务进程,不会打 ...
- [转帖]nginx优化配置及方法论
https://www.jianshu.com/p/87f8c03e91bd 1.优化方法论 从软件层面提升硬件使用效率 增大CPU的利用率 增大内存的利用率 增大磁盘IO的利用率 增大网络带宽的利用 ...
- [转帖]rsync工作原理
1)软件简介 Rsync 是一个远程数据同步工具,可通过 LAN/WAN 快速同步多台主机间的文件.Rsync 本来是用以取代rcp 的一个工具,它当前由 Rsync.samba.org 维护.Rsy ...
- [转帖]overcommit_memory、overcommit_ratio、CommitLimit、Committed_AS概念
overcommit_memory.overcommit_ratio.CommitLimit.Committed_AS概念 overcommit_memory是一个内核对内存分配的一种策略. over ...