用层模拟下拉列表框

大师都领会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-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] = "--特出网站--";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[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";}//挪动option时的动静功效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";}/*通用因变量*///获得东西坐标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-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] = "--特出网站--";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="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.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[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);//列表宽窄自符合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[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;/*通用因变量*///获得东西坐标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 十足采用 提醒：你可先窜改局部代码，再按运转]