中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

大家都知道select的優(yōu)先權(quán)比較高，CSS不宜控制，而且還能遮擋層的正常顯示！那么我們就來(lái)模擬一個(gè)！這樣樣式就可以隨心所欲了（若您看不到效果，請(qǐng)刷新）。

簡(jiǎn)單版：
<title>自制列表框</title> <style> .selectDiv { border: 2px solid inset buttonface;} .optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;} .optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;cursor:default;width:100%;} .defaultSelect { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;width:77px;} .arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:red;width:15px;text-align:center;cursor:default;font-size:8px;} </style> <SCRIPT LANGUAGE="JavaScript" DEFER> //用戶變量 var oWhere = document.body; var OptionText = new Array(); OptionText[0] = "--優(yōu)秀網(wǎng)站--"; OptionText[1] = "CSDN.net"; OptionText[2] = "藍(lán)色理想"; OptionText[3] = "PcHome"; OptionText[4] = "MSDN.com"; //下拉菜單主體 var selectDiv = document.createElement("table"); var selectDivTR = selectDiv.insertRow(); var defaultValueTD = selectDivTR.insertCell(); var arrow = selectDivTR.insertCell(); with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv"; with(defaultValueTD)innerText = OptionText[0],className="defaultSelect"; with(arrow)innerText=6,className="arrow"; oWhere.appendChild(selectDiv); //外層Div var optionDiv = document.createElement("div"); //設(shè)置下拉菜單選項(xiàng)的坐標(biāo)和寬度 with(optionDiv.style) { var select = selectDiv; var xy = getSelectPosition(select); pixelLeft = xy[0]; pixelTop = xy[1]+select.offsetHeight; width = selectDiv.offsetWidth; optionDiv.className = "optionDiv"; } //下拉菜單內(nèi)容 var Options = new Array(); for (var i=0;i<OptionText.length;i++) { Options[i] = optionDiv.appendChild(document.createElement("div")); } for (i=0;i<Options.length;i++) { Options[i].innerText = OptionText[i]; } oWhere.appendChild(optionDiv); /*事件*/ //禁止選擇文本 selectDiv.onselectstart = function() {return false;} optionDiv.onselectstart = function() {return false;} //下拉菜單的箭頭 arrow.onmousedown = function() { this.setCapture(); this.style.borderStyle="inset"; } arrow.onmouseup = function() { this.style.borderStyle="outset"; this.releaseCapture(); } arrow.onclick = function() { event.cancelBubble = true; optionDiv.style.visibility = optionDiv.style.visibility=="visible"?"hidden":"visible"; } document.onclick = function() { optionDiv.style.visibility = "hidden"; } defaultValueTD.onclick = function() { event.cancelBubble = true; optionDiv.style.visibility = optionDiv.style.visibility=="visible"?"hidden":"visible"; } //移動(dòng)Option時(shí)的動(dòng)態(tài)效果 for (i=0;i<Options.length;i++) { Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")}); Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")}); Options[i].attachEvent("onmouseup",selectedText); } function moveWithOptions(bg,color) { with(event.srcElement) { style.backgroundColor = bg; style.color = color; } } function selectedText() { with(event.srcElement) { defaultValueTD.innerText = innerText; } with(defaultValueTD.style)background="highlight",color="white"; } /*通用函數(shù)*/ //獲取對(duì)象坐標(biāo) function getSelectPosition(obj) { var objLeft = obj.offsetLeft; var objTop = obj.offsetTop; var objParent = obj.offsetParent; while (objParent.tagName != "BODY") { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } return([objLeft,objTop]); } </SCRIPT>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

高級(jí)版：
[支持圖片，16x16px（需設(shè)定路徑），列表框彈出滾動(dòng)效果支持傳值（需設(shè)定），自適應(yīng)寬度，根據(jù)最寬的一個(gè)選項(xiàng)自動(dòng)調(diào)整，樣式、效果基本摹仿select tag。]
<title>自定義列表框</title> <style> .selectDiv { border: 2px solid inset buttonface;} .optionDiv { border:1px solid black;border-top:0px;position:absolute;cursor:default;clip:rect(auto auto 0% auto);} .optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;background-color:white;} .optionDiv img { vertical-align: middle;margin-right:3px;} .defaultSelect { font-size:11px;font-family:Tahoma;padding-left:6px;border:1px solid white;cursor:default;} .defaultSelect img { vertical-align: middle;margin-right:3px;} .arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:buttonface;width:15px;text-align:center;cursor:default;font-size:8px;height:18px;} </style> <body> <span id="sel"></span><button style="font-family:Arial;font-size:10px;width:22px;height:18px;margin-top:4px;" onclick="putValue()">Go</button> <SCRIPT LANGUAGE="JavaScript"> //用戶變量 var oWhere = document.getElementById("sel"); //顯示文字 var OptionText = new Array(); OptionText[0] = "--優(yōu)秀網(wǎng)站--"; OptionText[1] = "piggydesign.yeah.net"; OptionText[2] = "藍(lán)色理想"; OptionText[3] = "PcHome.net"; OptionText[4] = "Sina.com.cn"; //顯示圖片 var OptionImg = new Array(); OptionImg[0] = ""; OptionImg[1] = ""; OptionImg[2] = new Image(),OptionImg[2].src="http://www.sayee.com/cloudchen/js/images/blueidea.gif"; OptionImg[3] = new Image(),OptionImg[3].src="http://www.sayee.com/cloudchen/js/images/pchome.gif"; OptionImg[4] = new Image(),OptionImg[4].src="http://www.sayee.com/cloudchen/js/images/sina.gif"; var OptionValue = new Array(); OptionValue[0] = ""; OptionValue[1] = "http://piggydesign.yeah.net"; OptionValue[2] = "http://www.95time.cn"; OptionValue[3] = "http://www.pchome.net"; OptionValue[4] = "http://www.sina.com.cn"; //系統(tǒng)變量 var selectedOver = false; var selectedValue = 0; //下拉菜單主體 var selectDiv = document.createElement("table"); var selectDivTR = selectDiv.insertRow(); var defaultValueTD = selectDivTR.insertCell(); var arrow = selectDivTR.insertCell(); with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv"; with(defaultValueTD)innerHTML = showOptionImg(1)+OptionText[0],className="defaultSelect"; with(arrow)innerText=6,className="arrow"; oWhere.appendChild(selectDiv); //外層Div var optionDiv = document.createElement("div"); //設(shè)置下拉菜單選項(xiàng)的坐標(biāo)和寬度 with(optionDiv.style) { var select = selectDiv; var xy = getSelectPosition(select); pixelLeft = xy[0]; pixelTop = xy[1]+select.offsetHeight; optionDiv.className = "optionDiv"; } //下拉菜單內(nèi)容 var Options = new Array(); for (var i=0;i<OptionText.length;i++) { Options[i] = optionDiv.appendChild(document.createElement("div")); } for (i=0;i<Options.length;i++) { Options[i].innerHTML = showOptionImg(i)+OptionText[i]; Options[i].index = i; } oWhere.appendChild(optionDiv); //列表寬度自適應(yīng) var SelectWidth = Options[0].offsetWidth+arrow.offsetWidth+8; selectDiv.style.width=SelectWidth;; optionDiv.style.width=SelectWidth; /*事件*/ //禁止選擇文本 selectDiv.onselectstart = function() {return false;} optionDiv.onselectstart = function() {return false;} //下拉菜單的箭頭 arrow.onmousedown = function() { this.setCapture(); this.style.borderStyle="inset"; } arrow.onmouseup = function() { event.cancelBubble = true; this.style.borderStyle="outset"; this.releaseCapture(); showHide(); } document.onmouseup = function() { optionDiv.style.clip="rect(auto auto 0% auto)"; if(selectedOver) { with(defaultValueTD.style)background="",color=""; selectedOver=false; } } defaultValueTD.onmouseup = function() { event.cancelBubble = true; showHide(); } //移動(dòng)Option時(shí)的動(dòng)態(tài)效果 for (i=0;i<Options.length;i++) { Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")}); Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")}); Options[i].attachEvent("onmouseup",selectedText); } function moveWithOptions(bg,color) { with(event.srcElement) { style.backgroundColor = bg; style.color = color; } } function selectedText() { event.cancelBubble=true; defaultValueTD.innerHTML = event.srcElement.innerHTML; with(defaultValueTD.style)background="highlight",color="white"; optionDiv.style.clip="rect(auto auto 0% auto)"; selectedOver = true; selectedValue = event.srcElement.index; } i = 0; /*通用函數(shù)*/ //獲取對(duì)象坐標(biāo) function getSelectPosition(obj) { var objLeft = obj.offsetLeft; var objTop = obj.offsetTop; var objParent = obj.offsetParent; while (objParent.tagName != "BODY") { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } return([objLeft,objTop]); } function showOptionImg(index) { var imgSrc = OptionImg[index].src; if (imgSrc!=undefined) return("<img src="+OptionImg[index].src+">") else return(""); } function dynamicOptions() { optionDiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20; if(i<101) setTimeout("dynamicOptions()",5); else i=0; } function showHide() { with(optionDiv.style) { if (clip=="rect(auto auto 0% auto)"||clip=="") dynamicOptions(); else clip="rect(auto auto 0% auto)"; } } function putValue() { var url = OptionValue[selectedValue]; if (url) window.open(url) } </SCRIPT>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

歡迎大家到論壇中參與討論!
http://www.95time.cn/bbs/newsdetail.asp?id=1148331

出處：藍(lán)色理想
責(zé)任編輯：紅色黑客

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論