javascript模擬美化select下拉選單效果詳解
本章節分享一段程式碼例項,它實現了模擬select下拉選單的效果。
由於自帶的select下拉選單效果基本不堪入目,所以在一些美觀度要求較高的網站使用此方式也是迫不得已。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> html,body{ height:100%; overflow:hidden; } body,div,form,h2,ul,li{ margin:0; padding:0; } ul{list-style-type:none;} body{ background:#23384e; font:12px/1.5 \5fae\8f6f\96c5\9ed1; } #search,#search form,#search .box,#search .select,#search a{ background:url(img/search.jpg) no-repeat; } #search,#search .box,#search form{height:34px;} #search{ position:relative; width:350px; margin:10px auto; } #search .box{ background-position:right 0; } #search form{ background-repeat:repeat-x; background-position:0 -34px; margin:0 20px 0 40px; } #search .select{ float:left; color:#fff; width:190px; height:22px; cursor:pointer; margin-top:4px; line-height:22px; padding-left:10px; background-position:0 -68px; } #search a{ float:left; width:80px; height:24px; color:#333; letter-spacing:4px; line-height:22px; text-align:center; text-decoration:none; background-position:0 -90px; margin:4px 0 0 10px; } #search a:hover{ color:#f60; background-position:-80px -90px ;} #search .sub{ position:absolute; top:26px; left:40px; color:#fff; width:198px; background:#2b2b2b; border:1px solid #fff; display:none; } #search .sub li{ height:25px; line-height:24px; cursor:pointer; padding-left:10px; margin-bottom:-1px; border-bottom:1px dotted #fff; } #search .sub li.hover{background:#8b8b8b;} </style> <script type="text/javascript"> window.onload = function () { var oSelect = document.getElementsByTagName("span")[0]; var oSub = document.getElementsByTagName("ul")[0]; var aLi = oSub.getElementsByTagName("li"); var index = 0; oSelect.onclick = function (ev) { var style = oSub.style; style.display = style.display == "block" ? "none" : "block"; //阻止事件冒泡 ev ? ev.stopPropagation() : window.event.cancelBubble = true }; for (index = 0; index < aLi.length; index++) { //滑鼠劃過 aLi[index].onmouseover = function () { this.className = "hover" }; //滑鼠離開 aLi[index].onmouseout = function () { this.className = ""; }; //滑鼠點選 aLi[index].onclick = function () { oSelect.innerHTML = this.innerHTML } } document.onclick = function () { oSub.style.display = "none"; }; }; </script> </head> <body> <div id="search"> <div class="box"> <form> <span class="select">請選擇遊戲名稱</span> <a href="javascript:;">搜尋</a> </form> </div> <ul class="sub"> <li>地下城與勇士</li> <li>魔獸世界(國服)</li> <li>魔獸世界(臺服)</li> <li>螞蟻部落</li> <li>softwhy.com</li> <li>QQ幻想世界</li> </ul> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload = function () {},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var oSelect = document.getElementsByTagName("span")[0],獲取第一個集合中的第一個span元素。
(3).var oSub = document.getElementsByTagName("ul")[0],獲取集合中的第一個ul元素。
(4).var aLi = oSub.getElementsByTagName("li"),獲取li元素集合。
(5).var index = 0,宣告一個變數並賦初值為0,後面會用到。
(6).oSelect.onclick = function (ev) {},註冊click事件處理函式。
(7).var style = oSub.style,獲取儲存各種樣式的一個物件,並賦值給變數style,這樣就不用每次oSub.style.xxx這樣的寫了,這樣每次都是重新從oSub物件中獲取樣式物件,對效能有影響。
(8).style.display = style.display == "block" ? "none" : "block",如果當前顯示,那麼就隱藏,繁殖就顯示。
(9).ev ? ev.stopPropagation() : window.event.cancelBubble = true,阻止事件冒泡,為什麼要阻止下面會介紹。
(10).for (index = 0; index < aLi.length; index++) {},批量註冊事件處理函式,實現當滑鼠懸浮或者離開下拉選單欄目的時候背景顏色發生改變效果。
(11).document.onclick = function () {
oSub.style.display = "none";
};,為document註冊事件處理函式,當點選頁面除了span元素,都會隱藏二級導航選單。
如果上面不阻止冒泡行為,那麼下來選單永遠無法展現。
二.相關閱讀:
(1).getElementsByTagName()可以參閱document.getElementsByTagName()一章節。
(2).三元運算子可以參閱三元運算子用法詳解一章節。
(3).相容所有瀏覽器的阻止冒泡功能可以參閱相容低版本IE瀏覽器的阻止事件冒泡效果程式碼一章節。
(4).onmouseover事件可以參閱javascript mouseover事件一章節。
(5).className可以參閱js className一章節。
(6).innerHTML可以參閱js innerHTML一章節。
完整程式碼下載:模擬select.rar
相關文章
- 模擬select下拉選單詳解
- 模擬美化select下拉選單程式碼例項
- jQuery 美化select下拉選單jQuery
- 模擬select下拉選單程式碼例項
- select下拉選單美化程式碼例項
- jQuery美化select下拉選單程式碼例項jQuery
- 模擬實現select下拉選單例項程式碼單例
- 模擬帶有滾動條的select下拉選單
- jQuery select下拉選單復位效果jQuery
- js自定義select下拉選單效果JS
- JavaScript二級下拉選單詳解JavaScript
- js模擬實現select下拉選單程式碼例項JS
- select下拉選單跳轉效果程式碼
- JavaScript動態操作select下拉選單JavaScript
- JavaScript 動態生成select下拉選單JavaScript
- JavaScript動態建立select下拉選單JavaScript
- JS列表的下拉選單元件(仿美化控制元件select)JS控制元件
- JavaScript 獲取select下拉選單所有optionJavaScript
- 選中select下拉選單option項實現提交效果
- JavaScript slide下拉導航選單效果JavaScriptIDE
- JavaScript滑鼠懸浮出現下拉選單效果JavaScript
- select下拉選單級聯效果例項程式碼
- select下拉選單實現分類級聯效果
- JS模擬下拉框selectJS
- JavaScript動態生成年份select下拉選單JavaScript
- HTML select下拉選單HTML
- HTML select 下拉選單HTML
- JavaScript 動畫效果緩慢二級下拉選單JavaScript動畫
- select下拉選單項互換效果程式碼例項
- 原生javascript操作select下拉選單程式碼例項JavaScript
- javascript動態設定select下拉選單字型大小JavaScript
- JavaScript動態設定select下拉選單預設選項JavaScript
- 圓角select下拉選單
- select下拉選單 change事件事件
- select下拉選單多級級聯效果程式碼例項
- javascript獲取select下拉選單所有項的內容JavaScript
- javascript刪除select下拉選單項程式碼例項JavaScript
- 選中select下拉選單項提交表單