用层模拟下拉列表框
时间：2007-02-17 来源：PHP爱好者
大家都知道select的优先权比较高，CSS不宜控制，而且还能遮挡层的正常显示！那么我们就来模拟一个！这样样式就可以随心所欲了（若您看不到效果，请刷新）。简单版：
<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-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-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] = "--优秀网站--";OptionText[1] = "CSDN.net";OptionText[2] = "蓝色理想";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);//外层Divvar optionDiv = document.createElement("div");//设置下拉菜单选项的坐标和宽度with(optionDiv.style) {var select = selectDiv;var xy = getSelectPosition(select);pixelLeft = xy[0];pixelTop = xy[1]+select.offsetHeight;width = selectDiv.offsetWidth;optionDiv.className = "optionDiv";}//下拉菜单内容var Options = new Array();for (var i=0;i<OptionText.length;i++) {Options = optionDiv.appendChild(document.createElement("div"));}for (i=0;i<Options.length;i++) {Options.innerText = OptionText;}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";}//移动Option时的动态效果for (i=0;i<Options.length;i++) {Options.attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});Options.attachEvent("onmouseout",function(){moveWithOptions("","")});Options.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";}/*通用函数*///获取对象坐标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 全部选择 提示：你可先修改部分代码，再按运行]高级版：
[支持图片，16x16px（需设定路径），列表框弹出滚动效果支持传值（需设定），自适应宽度，根据最宽的一个选项自动调整，样式、效果基本摹仿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-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-border:2px outset buttonhighlight;background-color:buttonface;width:15px;text-align:center;cursor:default;font-size:8px;}</style><body><span id="sel"></span><button style="font-family:Arial;font-size:10px;width:22px;margin-top:4px;" onclick="putValue()">Go</button><SCRIPT LANGUAGE="JavaScript">//用户变量var oWhere = document.getElementById("sel");//显示文字var OptionText = new Array();OptionText[0] = "--优秀网站--";OptionText[1] = "piggydesign.yeah.net";OptionText[2] = "蓝色理想";OptionText[3] = "PcHome.net";OptionText[4] = "Sina.com.cn";//显示图片var OptionImg = new Array();OptionImg[0] = "";OptionImg[1] = "";OptionImg[2] = new Image(),OptionImg[2].src="../images_html/200632121120945.gif";OptionImg[3] = new Image(),OptionImg[3].src="../images_html/200632121129625.gif";OptionImg[4] = new Image(),OptionImg[4].src="../images_html/200632121134432.gif";var OptionValue = new Array();OptionValue[0] = "";OptionValue[1] = "http://piggydesign.yeah.net";OptionValue[2] = "http://www.blueidea.com";OptionValue[3] = "http://www.pchome.net";OptionValue[4] = "http://www.sina.com.cn";//系统变量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);//外层Divvar optionDiv = document.createElement("div");//设置下拉菜单选项的坐标和宽度with(optionDiv.style) {var select = selectDiv;var xy = getSelectPosition(select);pixelLeft = xy[0];pixelTop = xy[1]+select.offsetHeight;optionDiv.className = "optionDiv";}//下拉菜单内容var Options = new Array();for (var i=0;i<OptionText.length;i++) {Options = optionDiv.appendChild(document.createElement("div"));}for (i=0;i<Options.length;i++) {Options.innerHTML = showOptionImg(i)+OptionText;Options.index = i;}oWhere.appendChild(optionDiv);//列表宽度自适应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();}//移动Option时的动态效果for (i=0;i<Options.length;i++) {Options.attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});Options.attachEvent("onmouseout",function(){moveWithOptions("","")});Options.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;/*通用函数*///获取对象坐标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+">")elsereturn("");}function dynamicOptions() {optionDiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20;if(i<101)setTimeout("dynamicOptions()",5);elsei=0;}function showHide() {with(optionDiv.style) {if (clip=="rect(auto auto 0% auto)"
clip=="")dynamicOptions();elseclip="rect(auto auto 0% auto)";}}function putValue() {var url = OptionValue[selectedValue];if (url) window.open(url)}</SCRIPT>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
php爱好者站 http://www.ｐｈｐfans.net 网页特效|网页模板
<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-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-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] = "--优秀网站--";OptionText[1] = "CSDN.net";OptionText[2] = "蓝色理想";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);//外层Divvar optionDiv = document.createElement("div");//设置下拉菜单选项的坐标和宽度with(optionDiv.style) {var select = selectDiv;var xy = getSelectPosition(select);pixelLeft = xy[0];pixelTop = xy[1]+select.offsetHeight;width = selectDiv.offsetWidth;optionDiv.className = "optionDiv";}//下拉菜单内容var Options = new Array();for (var i=0;i<OptionText.length;i++) {Options = optionDiv.appendChild(document.createElement("div"));}for (i=0;i<Options.length;i++) {Options.innerText = OptionText;}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";}//移动Option时的动态效果for (i=0;i<Options.length;i++) {Options.attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});Options.attachEvent("onmouseout",function(){moveWithOptions("","")});Options.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";}/*通用函数*///获取对象坐标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 全部选择 提示：你可先修改部分代码，再按运行]高级版：
[支持图片，16x16px（需设定路径），列表框弹出滚动效果支持传值（需设定），自适应宽度，根据最宽的一个选项自动调整，样式、效果基本摹仿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-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-border:2px outset buttonhighlight;background-color:buttonface;width:15px;text-align:center;cursor:default;font-size:8px;}</style><body><span id="sel"></span><button style="font-family:Arial;font-size:10px;width:22px;margin-top:4px;" onclick="putValue()">Go</button><SCRIPT LANGUAGE="JavaScript">//用户变量var oWhere = document.getElementById("sel");//显示文字var OptionText = new Array();OptionText[0] = "--优秀网站--";OptionText[1] = "piggydesign.yeah.net";OptionText[2] = "蓝色理想";OptionText[3] = "PcHome.net";OptionText[4] = "Sina.com.cn";//显示图片var OptionImg = new Array();OptionImg[0] = "";OptionImg[1] = "";OptionImg[2] = new Image(),OptionImg[2].src="../images_html/200632121120945.gif";OptionImg[3] = new Image(),OptionImg[3].src="../images_html/200632121129625.gif";OptionImg[4] = new Image(),OptionImg[4].src="../images_html/200632121134432.gif";var OptionValue = new Array();OptionValue[0] = "";OptionValue[1] = "http://piggydesign.yeah.net";OptionValue[2] = "http://www.blueidea.com";OptionValue[3] = "http://www.pchome.net";OptionValue[4] = "http://www.sina.com.cn";//系统变量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);//外层Divvar optionDiv = document.createElement("div");//设置下拉菜单选项的坐标和宽度with(optionDiv.style) {var select = selectDiv;var xy = getSelectPosition(select);pixelLeft = xy[0];pixelTop = xy[1]+select.offsetHeight;optionDiv.className = "optionDiv";}//下拉菜单内容var Options = new Array();for (var i=0;i<OptionText.length;i++) {Options = optionDiv.appendChild(document.createElement("div"));}for (i=0;i<Options.length;i++) {Options.innerHTML = showOptionImg(i)+OptionText;Options.index = i;}oWhere.appendChild(optionDiv);//列表宽度自适应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();}//移动Option时的动态效果for (i=0;i<Options.length;i++) {Options.attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});Options.attachEvent("onmouseout",function(){moveWithOptions("","")});Options.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;/*通用函数*///获取对象坐标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+">")elsereturn("");}function dynamicOptions() {optionDiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20;if(i<101)setTimeout("dynamicOptions()",5);elsei=0;}function showHide() {with(optionDiv.style) {if (clip=="rect(auto auto 0% auto)"
clip=="")dynamicOptions();elseclip="rect(auto auto 0% auto)";}}function putValue() {var url = OptionValue[selectedValue];if (url) window.open(url)}</SCRIPT>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
php爱好者站 http://www.ｐｈｐfans.net 网页特效|网页模板
相关阅读 更多 +
