歡迎來的我的小院，恭喜你今天又要漲知識了！
案例內容
利用JavaScript實作搜索框的移動展開，
演示
學習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>小院里的霍大俠</title>
</head>
<body>
<div >
<img src="https://img.uj5u.com/2022/12/26/334361260708131.png">
<input type="text" 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 (視頻原始碼免費獲取)
（部分素材來源于互聯網，如有保護請聯系作者）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540708.html
標籤：其他