用层模拟下拉列表框

日期：2007年11月6日作者：查看:[大字体中字体小字体]

大家都知道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="<a href="../InfoList/Catalog_110_1.html" target="_blank" title="javascript相关知识技巧" >javascript</a>" DEFER> //用户变量 var oWhere = document.body; var OptionText = new Array(); OptionText[0] = "--优秀网<a href="../InfoList/Catalog_134_1.html" target="_blank" title="建站交流" >站</a>--"; 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); //外层Div var 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>
[1] [2] [3] 下一页
用层模拟下拉列表框相关文章：
·QQ空间无边框板块的代码
·C#设计的一个向导程序（Wizard）框架
·下拉列表框1下拉列表框2(HTML版)
·图片相框，大头贴轻松做
·使用CSS处理表格边框样式化
·一个简单的基于XML的模块集成框架
·在一个jsp页面实现二级下拉框联动，实时读取数据库数据
·一个简单实用的数据库操作框架
·ASP.NET实现下拉框二级联动组件
·Flash技巧：谈动态滚动文本框制作方法
用层模拟下拉列表框相关软件
·EPC相框专家 V4.58 Build20061115

上一篇:HTML 表格特效整理

下一篇:DHTML 打造 Picture Spelling

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

用层模拟下拉列表框

精品推荐

热点TOP10

特别推荐