提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

文章目錄

• 前言
• 一、輸入框的狀態切換以及鼠標點擊下拉框的出現
  • 1.成果圖
  • 2.需求解析
  • 3.實現過程
• 二、背景色的滑動效果
  • 1.成果圖
  • 2.需求解析
  • 3.實現過程
• 總結

---

前言

在之前的文章中有分享過利用HTML+CSS制作靜態頁面（例如前文的阿里矢量圖標庫官網的實現），但之前的實現過程并未涉及JS的內容，今天實現了幾個小功能，其中運用到了之前所講的知識點，在這里一并分享給大家吧~

---

一、輸入框的狀態切換以及鼠標點擊下拉框的出現

1.成果圖

?2.需求解析

• 藍色區域的效果實現——如上圖所示，當用戶點擊藍色區域時，下拉框呈現對應的打開或關閉狀態，當鼠標點擊其他區域時，該區域也會呈現關閉狀態，那么如何實現呢？
• 解決方法：在書寫結構時，可將藍色區域設置為input框 type類型選為button（具體實現過程見下文）隨后利用輸入框的獲取/失去焦點事件進行控制。
• 輸入框的效果實現——?可利用輸入框的獲取/失去焦點事件實現。

3.實現過程

HTML 結構

<!-- 搜索框 --><div class="search-total-box"><input type="button" class="search-upbox" value="圖標"><i class="iconfont arrow-down">&#xe657;</i><!-- 下拉框 --><div class="search-downbox">圖標</div></input><div class="word">搜索圖標<b>20,830,680</b></div><input type="text" id="input"></div>

CSS樣式

.search-total-box {width: 760px;height: 58px;line-height: 58px;text-align: center;margin: 0 auto;border: 1px solid rgba(34, 43, 95, .79);background: rgba(14, 16, 52, .5);border-radius: 40px;padding: 0 4px;position: relative;transition: all .4s; }.search-total-box:hover {border-color: #6974b3; }.search-upbox {background: #6272D6;width: 130px;height: 50px;line-height: 50px;margin-top: 3px;border-radius: 45px;border: 1px solid transparent;text-align: center;font-size: 14px;color: #ffffff;position: relative;left: -316px;top: 1px;outline:none; }.arrow-down{position: absolute;left: 100px;top: 2px;font-size: 14px;color: #ccc;transition: transform .3s, top .3s; }.search-downbox {position: absolute;width: 120px;height: 50px;line-height: 50px;box-shadow: 0 0 4px 0 #6973b3;border-radius: 6px 6px 4px 4px;background-color: #090723;top: 60px;left: 10px;display: none;color: #ffffff;font-size: 14px; }.search-total-box>#input {width: 590px;height: 44px;position: absolute;top: 7px;right: 28px;outline: none;background: transparent;border: none;color: #fff;font-size: 18px !important; }.search-total-box .word {margin-top: -58px;font-size: 14px;color: #a6a5ad; }.search-total-box .word>b {padding-left: 6px;color: #ff0200;font-weight: 400; }

JS行為

// 設置圖標按鈕單擊下拉框出現 // 獲取按鈕 let upbox = document.getElementsByClassName("search-upbox")[0]; let downbox = document.getElementsByClassName("search-downbox")[0]; let arrow = document.getElementsByClassName("arrow-down")[0];// 設置點擊事件,為upbox設置鼠標監聽事件，當鼠標點擊時，設置相關效果 upbox.addEventListener("click",function () {if (downbox.style.display == "block") {downbox.style.display = "none";arrow.style.transform = "rotate(0deg)";} else {downbox.style.display = "block";arrow.style.transform = "rotate(180deg)";}},false );upbox.onblur = function () {downbox.style.display = "none";arrow.style.transform = "rotate(0deg)"; };// 當輸入框獲取焦點時，預留文字消失 // 獲取輸入框和預留文字部分 var input = document.getElementById('input'); var word = document.getElementsByClassName('word')[0]; input.onfocus = function( ){word.style.display = 'none'; } input.onblur = function( ){word.style.display = 'block'; }

---

二、背景色的滑動效果

1.成果圖

?

2.解析

• 當用戶點擊某元素時，相應的背景色以及如上圖所示的紅色底線也應該做相應的調整。
• 這就要利用到鼠標的點擊事件并控制該元素滑動的距離并結合全文所講的變形的知識點即可實現該功能

3.實現過程

3.1紅色背景區域實現過程

HTML結構

<div class="box" id="red-box"><ul><li>所有圖標</li><li>開放圖標</li><li>私有圖標<i class="iconfont why">&#xe611;</i></li></ul><!-- 紅色背景滑塊 --><div id="cover"></div></div>

CSS樣式

.box {width: 964px;height: 33px;margin: 12px 0px 20px; }.box>ul {width: 270px;height: 32px;background: #ddd;border-radius: 40px;display: inline-block;vertical-align: middle;position: relative; }.box>ul>li {float: left;width: 90px;height: 32px;line-height: 32px;text-align: center;position: relative;z-index: 2;font-size: 12px;color: #333;cursor: pointer;transition: color .2s ease-in-out; } .box>ul>li:first-child{color: #fff; } #cover {position: relative;left: 0;top:-32px;width: 90px;height: 32px;background-color: #ff0000;z-index: 1;border-radius: 17px;cursor: auto;transition: left .1s ease-in-out; }.why {margin-left: 5px;color: #999;font-size: 30px;font-weight: bold;vertical-align: middle; } // 我的資源區域點擊切換效果實現 // 獲取每一個li var active0 = document.querySelectorAll('.project-left li')[0]; var active1 = document.querySelectorAll('.project-left li')[1]; var active2 = document.querySelectorAll('.project-left li')[2]; // 獲取底部紅色的線條 var line = document.getElementById('red-line');// 為每一個 li 綁定單擊事件 active0.onclick = function( ){active0.className = 'my-source';line.style.left = '35px'; }active1.onclick = function( ){active1.className = 'my-source';line.style.left = '130px'; }active2.onclick = function( ){active2.className = 'my-source';line.style.left = '219px'; }

3.2我的資源下方滑動條

HTML結構

<!-- 項目與資源區域 --><div class="project-left"><ul><li class="my-source"><a href="#">我的資源</a></li><li class="my-source"><a href="#">我的收藏</a></li><li class="my-source"><a href="#">我的項目</a></li></ul><!-- 底部紅色線條 --><span id="red-line"></span></div>

CSS樣式

.project-left {width: 276px;height: 50px;position: relative; }.project-left li {float: left;width: 56px;height: 50px;line-height: 50px;padding: 0 8px;text-align: center;margin-right: 20px; }.project-left li:hover a {color: #fff; }#red-line {width: 72px;height: 2px;background: red;display: block;z-index: 10;transition: width .1s ease-in-out;position: absolute;bottom: -1px;left: 35px;transform: translate(-50%, 0); }.project-left li:first-child a {color: #fff; }.project-left li>a {font-size: 14px;color: #a6a5ad; }

JS行為

// 紅色圖標的背景色切換效果// 獲取紅色圖標下的所有子元素 let list0 = document.querySelectorAll("#red-box li")[0]; let list1 = document.querySelectorAll("#red-box li")[1]; let list2 = document.querySelectorAll("#red-box li")[2];// 獲取紅色滑塊 let cover = document.getElementById("cover");// 獲取問號小圖標 let why = document.getElementsByClassName('why')[0]; console.log(why); // 為每一個li添加點擊事件 list0.onclick = function () {cover.style.left = "0";list0.style.color = "#fff";list1.style.color = "#333";list2.style.color = "#333";why.style.color = '#999'; }; list1.onclick = function () {cover.style.left = "90px";list1.style.color = "#fff";list0.style.color = "#333";list2.style.color = "#333";why.style.color = '#999'; }; list2.onclick = function () {cover.style.left = "180px";list2.style.color = "#fff";list0.style.color = "#333";list1.style.color = "#333";why.style.color = '#fff'; };

---

總結

ok,寫到這里今天的分享也就到此結束啦，今天天氣很好，本人很開心，如果你看到這里也記得要笑一笑哦，最后誠摯祝福屏幕前的你健康幸福、平安喜樂。

總結

以上是生活随笔為你收集整理的JS——背景色的滑动效果以及输入框的状态切换效果实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。