搜尋

select发展史

May 16, 2016 pm 07:19 PM

本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。

最初的select的确很平淡,就是一个下拉选项列表:

<style>
select,option {background-color:lime}
</style>
<select>
<center>
<option>1
<option>2
<option>不是一样的嘛</select>

日久天长之后,人们对select要求高了,要修一修边幅:

<br><br>
<script>
i=1;
</script>
<center>
<form name="form1">
  <select name="select01">
    <option>11111 111111 111111111111</option>
    <option>2222222</option>
    <option>333333</option>
    <option>4444444</option>
  </select>
<span style="position:relative;left:-23px;width:17px;height:17px;font:7px &#39;wingdings 3&#39;;color:#cc0000;background:cyan;border:2px outset;text-align:center;padding-top:3px;cursor:default" onclick="if(i>=document.form1.select01.options.length){i=0}document.form1.select01.options[i].selected=true;i++">q
<iframe src="" style="position:absolute;top:0;left:0;z-index:-1; width:15px;height:15px;filter:alpha(opacity=0))" frameborder="0"></iframe>
</span>
</form>
<br><br><br>




<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px}
.td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;}
.td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px}
.slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;}
.down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold;
}
.selp{
position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000;
SCROLLBAR-FACE-COLOR: #d0dff7; 
SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7; 
SCROLLBAR-SHADOW-COLOR: #FFFFFF; 
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; 
SCROLLBAR-ARROW-COLOR: #ffffff; 
SCROLLBAR-TRACK-COLOR: #ffffff; 
SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;}
</style>
<script language="JavaScript">
document.onclick=hiddenDiv;
function getDivCount() {
 var arr=document.all; 
 re=0;
 for (i=0;i<arr.length;i++) {
  str=arr[i].id;  
  if (str.indexOf("ZfDiv_")==0) {   
   re++;  
  }
 } 
 return re;
}

function getI(ObjId) {//取得objId的最后一位数字
 for (i=0;i<ObjId.length;i++) {
  if (ObjId.charAt(i)=="_") return ObjId.substr(i+1,ObjId.length-1);
 }
 return 0;
}

function select_edit(TextObj){//鼠标经过高亮度 
 TextObj.focus();TextObj.select();
}

function checkValue(ID){   
 var sl=document.all["ZfText_"+ID]; 
 var sv=document.all["ZfDiv_"+ID];
 var da=document.all["ZfData_"+ID];   
 sv.style.display=&#39;&#39;
 
 for(i=0;i<da.rows.length;i++)da.rows[i].style.display=&#39;&#39;
 
 for(i=0;i<da.rows.length;i++){
  if(da.rows[i].cells[0].innerText.indexOf(sl.value)!=0)da.rows[i].style.display=&#39;none&#39;;
  getPosition(ID);
 } 
}

function getL(e){
 var l=e.offsetLeft;
 while(e=e.offsetParent){
  l+=e.offsetLeft;
 }
 return l
}
function getT(e){
 var t=e.offsetTop;
 while(e=e.offsetParent){
  t+=e.offsetTop;
 }
 return t
}

function getPosition(ID){ 
 var sv=document.all["ZfDiv_"+ID];
 var sl=document.all["ZfText_"+ID];
 var spn=document.all["ZfSpan_"+ID];
 var da=document.getElementById("ZfData_"+ID);
 sv.style.pixelWidth=spn.offsetWidth;
 da.style.pixelWidth=sv.offsetWidth;
 sv.style.pixelLeft=getL(spn);
 sv.style.pixelTop=getT(spn)+sl.offsetHeight+3;
 if(da.offsetHeight>200){
  sv.style.pixelHeight=200;
  sv.style.overflowY=&#39;scroll&#39;;
 }
 else {
  sv.style.pixelHeight=da.offsetHeight;
  sv.style.overflowY=&#39;hidden&#39;;
 }
}

function dropDown(ID){ 
 var sv=document.all["ZfDiv_"+ID]
 var tb=document.all["ZfData_"+ID]
 
 if(sv.style.display==&#39;none&#39;){  
  sv.style.display=&#39;&#39;;  
  for(i=0;i<tb.rows.length;i++)tb.rows[i].style.display=&#39;&#39;
  getPosition(ID);  
 } else {  
  sv.style.display=&#39;none&#39;;
 }
}//下拉摸拟层

function hiddenDiv(){
 var o=window.event.srcElement.id;
 var tb 
 var sv 
 if(o=="") {
  for (j=0;j<getDivCount();j++) {
   tb=document.getElementById(&#39;ZfData_&#39;+j);
   sv=document.getElementById(&#39;ZfDiv_&#39;+j);   
   for(i=0;i<tb.rows.length;i++) tb.rows[i].style.display=&#39;&#39;;
   sv.style.display=&#39;none&#39;;   
  }
  
 }

}//隐藏模拟层


function setValue(obj){
var i=getI(obj.parentElement.parentElement.parentElement.id);
//alert(obj.parentElement.parentElement.parentElement.id);

var sl=document.all["ZfText_"+i];
var sv=document.all[&#39;ZfDiv_&#39;+i];
sl.value=obj.innerText;
sv.style.display=&#39;none&#39;;
//sldIndex=obj.parentElement.rowIndex;
}//给文本框赋值

function over(obj){
 obj.className="td_over"
 obj.title=obj.innerText
 obj.focus();
}//鼠标经过变色

function out(obj){
 obj.className="td_out"
}//鼠标离开还原

function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,&#39;&#39;)}//自定义去空格函数Trim()


//增加list的接口,ID表示该组控件是页面中的第几个
function add(v,ID){
var sv=document.all[&#39;ZfDiv_&#39;+ID];
if(!v.Trim()){return;}
var tb=document.all[&#39;ZfData_&#39;+ID];
var c=tb.insertRow(tb.rows.length).insertCell();
c.innerHTML=&#39;<nobr>&#39;+v.Trim()+&#39;</nobr>&#39;;
c.onmouseover=new Function("over(this)");
c.onmouseout=new Function("out(this)");
c.onclick=new Function("setValue(this)");
c.className="td_out";
v=&#39;&#39;;
}
//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空
function addText(name,DefValue) {
 var i=getDivCount();
 document.write(&#39;<span id="ZfSpan_&#39;+i+&#39;" style="border:1 solid #9CA0CB">&#39;);
 document.write(&#39;<input type="text" value="&#39;+DefValue+&#39;" name="&#39;+name+&#39;" id="ZfText_&#39;+i+&#39;" ondblclick="ZfDrop_&#39;+i+&#39;.click()" class="slv" onmouseover="select_edit(this)"  onkeyup="checkValue(&#39;+i+&#39;)"><input type=button id="ZfDrop_&#39;+i+&#39;" value=">" onclick="this.hideFocus=true;dropDown(&#39;+i+&#39;);" class="down" onmouseover="this.style.backgroundColor=#EEF3FD" onmouseout="this.style.backgroundColor=\&#39;\&#39;" onmousedown="this.style.backgroundColor=#ABC4F5" onmouseup="this.style.backgroundColor=\&#39;\&#39;"></span>&#39;);
 document.write(&#39;<p id="ZfDiv_&#39;+i+&#39;" class="selp" style="display:none;"><table id="ZfData_&#39;+i+&#39;" onselectstart="return false" border="0"  cellspacing="0" cellpadding="0" class="table1"></table></p>&#39;);
}

 

</script>
</head>
<body>

<script language="JavaScript">
addText("name1","a");
add("1234",0);
add("1234",0);
addText("name1","a");
add("1234",1);
add("1234",1);
</script>

要加一些链接,变成菜单:

<STYLE>
body { cursor: url(http://vip.6to23.com/candylau/image/xiucursor.cur)}
</STYLE>




<style>
.select{border: 0 inset buttonface; width: 100; font: icon; cursor: default;}
.selected{border: 0 inset buttonface; background: window; padding: 0; font: icon;}
.selectTable{height: 100%; width: 100%;border: 2 inset buttonhighlight; background: buttonface;}
.option    {font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;}
.dropDown{position: absolute; visibility: hidden; width: 100%;border: 1 solid windowtext; padding: 0;background: window;}
.select .button    {width: 16px; height: 5; font-family: webdings; padding: 0;font-size: 11px; border: 2 outset buttonhighlight;}
</style>

<script type="text/javascript">
var overOptionCss = "background: highlight; color: highlighttext";
var sizedBorderCss = "2 inset buttonhighlight";
var globalSelect;
var ie4 = (document.all != null);
var q = 0;
function initSelectBox(el) {
    copySelected(el);
    var size = el.getAttribute("size");
    el.options = el.children[1].children;
    el.selectedIndex = findSelected(el);
    el.remove = new Function("i", "int_remove(this,i)");
    el.item   = new Function("i", "return this.options[i]");
    el.add    = new Function("e", "i", "int_add(this, e, i)");    
    el.options[el.selectedIndex].selected = true;

    dropdown = el.children[1];

    if (size != null) {
        if (size > 1) {
            el.size = size;
            dropdown.style.zIndex = 0;
            initSized(el);
        }
        else {
            el.size = 1;
            dropdown.style.zIndex = 99;
            if (dropdown.offsetHeight > 200) {
                dropdown.style.height = "200";
                dropdown.style.overflow = "auto";
            }
        }
    }
    
    highlightSelected(el,true);
}

function int_remove(el,i) {
    if (el.options[i] != null)
        el.options[i].outerHTML = "";
}

function int_add(el, e, i) {
    var html = "<p class=&#39;option&#39; noWrap";
    if (e.value != null)
        html += " value=&#39;" + e.value + "&#39;";
    if (e.style.cssText != null)
        html += " style=&#39;" + e.style.cssText + "&#39;";
    html += ">";
    if (e.text != null)
        html += e.text;
    html += "</p>"

    if ((i == null) || (i >= el.options.length))
        i = el.options.length-1;
    el.options[i].insertAdjacentHTML("AfterEnd", html);
}
    
function initSized(el) {
    var h = 0;
    el.children[0].style.display = "none";
    dropdown = el.children[1];
    dropdown.style.visibility = "visible";

    if (dropdown.children.length > el.size) {
        dropdown.style.overflow = "auto";
        for (var i=0; i<el.size; i++) {
            h += dropdown.children[i].offsetHeight;
        }

        if (dropdown.style.borderWidth != null) {
            dropdown.style.pixelHeight = h + 4;
        }

        else
            dropdown.style.height = h;
    }

    dropdown.style.border = sizedBorderCss;
    el.style.height = dropdown.style.pixelHeight;
}

function copySelected(el) {
    var selectedIndex = findSelected(el);
    selectedCell = el.children[0].rows[0].cells[0];
    selectedDiv  =     el.children[1].children[selectedIndex];
    selectedCell.innerHTML = selectedDiv.outerHTML;
}

function findSelected(el) {
    var selected = null;


    ec = el.children[1].children;
    var ecl = ec.length;
    
    for (var i=0; i<ecl; i++) {
        if (ec[i].getAttribute("selected") != null) {
            if (selected == null) {
                selected = i;
            }
            else
                ec[i].removeAttribute("selected");
        }
    }
    if (selected == null)
        selected = 0;

    return selected;
}

function toggleDropDown(el) {
    if (el.size == 1) {
        dropDown = el.children[1];
        
        if (dropDown.style.visibility == "")
            dropDown.style.visibility = "hidden";
            
        if (dropDown.style.visibility == "hidden")
            showDropDown(dropDown);
        else
            hideDropDown(dropDown);
    }
}

function optionClick() {
    el = getReal(window.event.srcElement, "className", "option");

    if (el.className == "option") {
        dropdown  = el.parentElement;
        selectBox = dropdown.parentElement;
        oldSelected = dropdown.children[findSelected(selectBox)]

        if(oldSelected != el) {
            oldSelected.removeAttribute("selected");
            el.setAttribute("selected", 1);
            selectBox.selectedIndex = findSelected(selectBox);
        }

        if (selectBox.onchange != null) {
            if (selectBox.id != "") {
                eval(selectBox.onchange.replace(/this/g, selectBox.id));
            }
            else {
                globalSelect = selectBox;
                eval(selectBox.onchange.replace(/this/g, "globalSelect"));
            }
        }

        if (el.backupCss != null)
        el.style.cssText = el.backupCss;
        copySelected(selectBox);
        toggleDropDown(selectBox);
        highlightSelected(selectBox, true);
    }
}

function optionOver() {
    var toEl = getReal(window.event.toElement, "className", "option");
    var fromEl = getReal(window.event.fromElement, "className", "option");
    if (toEl == fromEl) return;
    var el = toEl;
    if (el.className == "option") {
        if (el.backupCss == null)
            el.backupCss = el.style.cssText;
        highlightSelected(el.parentElement.parentElement, false);
        el.style.cssText = el.backupCss + "; " + overOptionCss;
        this.highlighted = true;
    }
}

function optionOut() {
    var toEl = getReal(window.event.toElement, "className", "option");
    var fromEl = getReal(window.event.fromElement, "className", "option");
    if (fromEl == fromEl.parentElement.children[findSelected(fromEl.parentElement.parentElement)]) {
        if (toEl == null)
            return;
        if (toEl.className != "option")
            return;
    }
    
    if (toEl != null) {
        if (toEl.className != "option") {
            if (fromEl.className == "option")
                highlightSelected(fromEl.parentElement.parentElement, true);
        }
    }
    
    if (toEl == fromEl) return;
    var el = fromEl;

    if (el.className == "option") {
        if (el.backupCss != null)
            el.style.cssText = el.backupCss;
    }

}

function highlightSelected(el,add) {
    var selectedIndex = findSelected(el);
    selected = el.children[1].children[selectedIndex];
    
    if (add) {
        if (selected.backupCss == null)
            selected.backupCss = selected.style.cssText;
        selected.style.cssText = selected.backupCss + "; " + overOptionCss;
    }
    else if (!add) {
        if (selected.backupCss != null)
            selected.style.cssText = selected.backupCss;
    }
}

function hideShownDropDowns() {
var el = getReal(window.event.srcElement, "className", "select");
var spans = document.all.tags("SPAN");
var selects = new Array();
var index = 0;
    
    for (var i=0; i<spans.length; i++) {
if ((spans[i].className == "select") && (spans[i] != el)) {
    ropdown = spans[i].children[1];
if ((spans[i].size == 1) && (dropdown.style.visibility == "visible"))
    selects[index++] = dropdown;
    }
}
for (var j=0; j<selects.length; j++) {
hideDropDown(selects[j]);
}
}

function hideDropDown(el) {
    if (typeof(fade) == "function")
    fade(el, false);
    else
    el.style.visibility = "hidden";
}

function showDropDown(el) {
    if (typeof(fade) == "function")
    fade(el, true);
    else if (typeof(swipe) == "function")
    swipe(el, 2);
    else
    el.style.visibility = "visible";
}

function initSelectBoxes() {
var spans = document.all.tags("SPAN");
var selects = new Array();
var index = 0;

for (var i=0; i<spans.length; i++) {
if (spans[i].className == "select")
selects[index++] = spans[i];
}
for (var j=0; j<selects.length; j++) {
initSelectBox(selects[j]);
}    
}

function getReal(el, type, value) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if (eval("temp." + type) == value) {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
if (ie4) {
window.onload = initSelectBoxes;
document.onclick = hideShownDropDowns;
}
function writeSelectBox(matrix, id, size, onchange, css) {
    var d = window.document;
    var ie4 = (document.all != null);
    if (ie4) {
//alert("Before!");
var s = createIEString(matrix, id, size, onchange, css);
document.write(s);
//alert("After!");
}else 
{
document.write(createXString(matrix, id, size, onchange, css));}
}

function createIEString(matrix, id, size, onchange, css) {
    var str = "";
        str += &#39;<span class="select"&#39;;
        if (size == null)
            size = 1;
        str += &#39; size="&#39; + size + &#39;"&#39;;    
        if (id != null)
            str += &#39; id="&#39; + id + &#39;"&#39;;
        if (onchange != null)
            str += &#39; onchange="&#39; + onchange + &#39;"&#39;;
        if (css != null)
        str += &#39; style="&#39; + css + &#39;"&#39;;
        str += &#39;>\n&#39;;
        str += &#39;<table class="selectTable" cellspacing="0" cellpadding="0"\n&#39;;
        str += &#39; onclick="toggleDropDown(this.parentElement)">\n&#39;;
        str += &#39;<tr>\n&#39;;
        str += &#39;<td class="selected"> </td>\n&#39;;
        str += &#39;<td align="CENTER" valign="MIDDLE" class="Button"\n&#39;;
        str += &#39; onmousedown="this.style.border=\&#39;2 inset buttonhighlight\&#39;"\n&#39;;
        str += &#39; onmouseup="this.style.border=\&#39;2 outset buttonhighlight\&#39;">\n&#39;;
        str += &#39;<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>\n&#39;;
        str += &#39;</tr>\n&#39;;
        str += &#39;</table>\n&#39;;
        str += &#39;<p class="dropDown" onclick="optionClick()" onmouseover="optionOver()" onmouseout="optionOut()">\n&#39;;
        
        for (var i=0; i<matrix.length; i++) {
            html     = matrix[i].html;
            value    = matrix[i].value;
            css      = matrix[i].css;
            selected = matrix[i].selected;
            str += &#39;<p class="option"&#39;;
            if (value != null)
                str += &#39; value="&#39; + value + &#39;"&#39;;
            if (css != null)
                str += &#39; style="&#39; + css + &#39;"&#39;;
            if (selected != null)
                str += &#39; selected&#39;;
            str += &#39;>\n&#39;;
            str += html;
            str += &#39;</p>\n&#39;;
        }
        str += &#39;</p>\n&#39;;
        str += &#39;</span>\n&#39;;
    return str;
}

function createXString(matrix, id, size, onchange, css) {
var str = &#39;<form>\n&#39;;
str += &#39;<select&#39;;
if (size == null)
    size = 1;
str += &#39; size="&#39; + size + &#39;"&#39;;    
if (id != null)
    str += &#39; id="&#39; + id + &#39;"&#39;;
if (onchange != null)
    str += &#39; onchange="&#39; + onchange + &#39;"&#39;;
str += &#39;>\n&#39;;

for (var i=0; i<matrix.length; i++) {
    html     = matrix[i].html;
    value    = matrix[i].value;
    css      = matrix[i].css;
    selected = matrix[i].selected;
    str += &#39;\n<option&#39;;
    if (value != null)
    str += &#39; value="&#39; + value + &#39;"&#39;;
    if (selected != null)
        str += &#39; selected&#39;;
    str += &#39;>&#39;;
    str += stripTags(html);
    str += &#39;</option>\n&#39;;
    }
    str += &#39;\n</select>\n&#39;;
    str += &#39;</form>\n&#39;;
return str;
}

function stripTags(str) {
    var s = 0;
    var e = -1;
    var r = "";
    s = str.indexOf("<",e);    
    do {
        r += str.substring(e + 1,s);
        e = str.indexOf(">",s);
        s = str.indexOf("<",e);
    }
    while ((s != -1) && (e != -1))
    r += str.substring(e + 1,str.length);
    return r;
}

function Option(html, value, css, selected) {
    this.html = html;
    this.value = value;
    this.css = css;
    this.selected = selected;
}
</script>
<script type="text/javascript">
var optionArray = new Array();
optionArray[0] = new Option("Item 1", "value 1", "color: blue; text-decoration: underline;");
optionArray[1] = new Option("Item <b>2</b>", "value 2");
optionArray[2] = new Option("Item 3", "value 3", "color: red;", "selected");
optionArray[3] = new Option("Item 4", "value 4");
optionArray[4] = new Option("Item 5", "value 5");
writeSelectBox(optionArray, "select1", 1, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;");
</script>
<br>
<script type="text/javascript">
writeSelectBox(optionArray, "select3", 3, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;");
</script>












<br><br><br><br>
<select onchange="if(this.options[this.selectedIndex].value!=&#39;&#39;){location=this.options[this.selectedIndex].value;}" >
<option value="http://www.163.com">网易</option>
<option value="http://www.google.com">google</option>
<option value="http://wwwsohu.com">搜狐</option>
</select>


<br><br><br><br>
<form>
<select size="1" name="D1" onchange=if(s=document.getElementById("S1")){s.style.backgroundColor=value}>
<option selected value="white">请选择颜色</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
<br>
<textarea rows="20" name="S1" cols="35"></textarea>

</form>

<br><br>
<script language="Javascript">
var mmenus    = new Array();
var misShow   = new Boolean(); 
misShow=false;
var misdown   = new Boolean();
misdown=false;
var musestatus=false;
var mpopTimer = 0;
mmenucolor=&#39;#396DA5&#39;;mfontcolor=&#39;#80FFFF&#39;;mmenuoutcolor=&#39;#396DA5&#39;;mmenuincolor=&#39;#9595FF&#39;;mmenuoutbordercolor=&#39;#00FFFF&#39;;mmenuinbordercolor=&#39;#000000&#39;;mmidoutcolor=&#39;#269DC3&#39;;mmidincolor=&#39;#26486E&#39;;mmenuovercolor=&#39;#FFFF00&#39;;mitemedge=&#39;1&#39;;msubedge=&#39;0&#39;;mmenuunitwidth=60;mmenuitemwidth=160;mmenuheight=30;mmenuwidth=&#39;300&#39;;mmenuadjust=0;mmenuadjustV=0;mfonts=&#39;font-family: Verdana; font-size: 8pt; color: #80FFFF; &#39;;mcursor=&#39;default&#39;;
var swipeSteps = 4;
var swipemsec = 25;
var swipeArray = new Array();
function swipe(el, dir, steps, msec) {
	if (steps == null) steps = swipeSteps;
	if (msec == null) msec = swipemsec;
	if (el.swipeIndex == null)
		el.swipeIndex = swipeArray.length;
	if (el.swipeTimer != null)
		window.clearTimeout(el.swipeTimer);
	swipeArray[el.swipeIndex] = el;
	el.style.clip = "rect(-99999, 99999, 99999, -99999)";
	if (el.swipeCounter == null || el.swipeCounter == 0) {
		el.orgLeft  = el.offsetLeft;
		el.orgTop  = el.offsetTop;
		el.orgWidth = el.offsetWidth;
		el.orgHeight  = el.offsetHeight;
	}
	el.swipeCounter = steps;
	el.style.clip = "rect(0,0,0,0)";
	window.setTimeout("repeat(" + dir + "," + el.swipeIndex + "," + steps + "," + msec + ")", msec);
}
function repeat(dir, index, steps, msec) {
	el = swipeArray[index];
	var left   = el.orgLeft;
	var top    = el.orgTop;
	var width  = el.orgWidth;
	var height = el.orgHeight;
	if (el.swipeCounter == 0) {
		el.style.clip = "rect(-99999, 99999, 99999, -99999)";
		return;
	}
	else {
		el.swipeCounter--;
		el.style.visibility = "visible";
		switch (dir) {
			case 2:
				el.style.clip = "rect(" + height*el.swipeCounter/steps + "," + width + "," + height + "," + 0 + ")";
				el.style.top  = top - height*el.swipeCounter/steps;
				break;
			case 8:
				el.style.clip = "rect(" + 0 + "," + width + "," + height*(steps-el.swipeCounter)/steps + "," + 0 + ")";
				el.style.top  = top + height*el.swipeCounter/steps;
				break;
			case 6:
				el.style.clip = "rect(" + 0 + "," + width + "," + height + "," + width*(el.swipeCounter)/steps + ")";
				el.style.left  = left - width*el.swipeCounter/steps;
				break;
			case 4:
				el.style.clip = "rect(" + 0 + "," + width*(swipeSteps - el.swipeCounter)/steps + "," + height + "," + 0 + ")";
				el.style.left  = left + width*el.swipeCounter/steps;
				break;
		}
		
		el.swipeTimer = window.setTimeout("repeat(" + dir + "," + index + "," + steps + "," + msec + ")", msec);
	}
}
var mtmpleft="";
var mtmptop="";
function hideSwipe(el) {
	window.clearTimeout(el.swipeTimer);
	el.style.visibility = "hidden";
	el.style.clip = "rect(-99999, 99999, 99999, -99999)";
	el.swipeCounter = 0;
	if(mtmpleft!="")el.style.left = mtmpleft;
	if(mtmptop!="")el.style.top = mtmptop;
}

function stoperror(){
return true;
}
window.onerror=stoperror;
function mpopOut() {
mpopTimer = setTimeout(&#39;mallhide()&#39;, 500);
}
function getReal(el, type, value) {
	temp = el;
	while ((temp != null) && (temp.tagName != "BODY")) {
		if (eval("temp." + type) == value) {
			el = temp;
			return el;
		}
		temp = temp.parentElement;
	}
	return el;
}


function mMenuRegister(menu) 
{
  mmenus[mmenus.length] = menu
  return (mmenus.length - 1)
}
function mMenuItem(caption,command,target,isline,statustxt,img,sizex,sizey,pos){
	this.caption=caption;
	this.command=command;
	this.target=target;
	this.isline=isline;
	this.statustxt=statustxt;
	this.img=img;
	this.sizex=sizex;
	this.sizey=sizey;
	this.pos=pos;
}
function mMenu(caption,command,target,img,sizex,sizey,pos){
	this.items = new Array();
	this.caption=caption;
	this.command=command;
	this.target=target;
	this.img=img;
	this.sizex=sizex;
	this.sizey=sizey;
	this.pos=pos;
	this.id=mMenuRegister(this);
}
function mMenuAddItem(item)
{
  this.items[this.items.length] = item
  item.parent = this.id;
  this.children=true;
}

mMenu.prototype.addItem = mMenuAddItem;
function mtoout(src){

src.style.borderLeftColor=mmenuoutbordercolor;
src.style.borderRightColor=mmenuinbordercolor;
src.style.borderTopColor=mmenuoutbordercolor;
src.style.borderBottomColor=mmenuinbordercolor;
src.style.backgroundColor=mmenuoutcolor;
src.style.color=mmenuovercolor;
}
function mtoin(src){

src.style.borderLeftColor=mmenuinbordercolor;
src.style.borderRightColor=mmenuoutbordercolor;
src.style.borderTopColor=mmenuinbordercolor;
src.style.borderBottomColor=mmenuoutbordercolor;
src.style.backgroundColor=mmenuincolor;
src.style.color=mmenuovercolor;
}
function mnochange(src){
src.style.borderLeftColor=mmenucolor;
src.style.borderRightColor=mmenucolor;
src.style.borderTopColor=mmenucolor;
src.style.borderBottomColor=mmenucolor;
src.style.backgroundColor=&#39;&#39;;
src.style.color=mfontcolor;

}
function mallhide(){
	for(var nummenu=0;nummenu<mmenus.length;nummenu++){
		var themenu=document.all[&#39;mMenu&#39;+nummenu]
		var themenup=document.all[&#39;mmenup&#39;+nummenu]
                mnochange(themenu);
                mmenuhide(themenup);
                }
}
function mmenuhide(menuid){

hideSwipe(menuid);
misShow=false;
}
function mmenushow(menuid,pid){

menuid.style.left=mmenutable.offsetLeft+pid.offsetLeft+mmenuadjust;menuid.style.top=mmenutable.offsetTop-menuid.offsetHeight+mmenuadjustV;
if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth+document.body.scrollLeft)
menuid.style.left=document.body.clientWidth+document.body.scrollLeft-mmenuitemwidth;
mtmpleft=menuid.style.left;mtmptop=menuid.style.top;swipe(menuid,8,4);
misShow=true;
}
function mmenu_over(menuid,x){
toel = getReal(window.event.toElement, "className", "coolButton");
fromel = getReal(window.event.fromElement, "className", "coolButton");
if (toel == fromel) return;
if(x==4){
  misShow = false;
  mallhide();
  mtoout(eval("mMenu"+x));
}else{
if(!misShow){mtoout(eval("mMenu"+x));}else{
  mallhide();
  mtoin(eval("mMenu"+x));
  mmenushow(menuid,eval("mMenu"+x));
}
}

}
function mmenu_out(x){
toel = getReal(window.event.toElement, "className", "coolButton");
fromel = getReal(window.event.fromElement, "className", "coolButton");
if (toel == fromel) return;
if (misShow){
mtoin(eval("mMenu"+x));
}else{
mnochange(eval("mMenu"+x));
}

}
function mmenu_down(menuid,x){
  if(misShow){
  mmenuhide(menuid);
  mtoout(eval("mMenu"+x));
  }
  else{
  mtoin(eval("mMenu"+x));
  mmenushow(menuid,eval("mMenu"+x));
  misdown=true;
  }
}
function mmenu_up(){
  misdown=false;
}
function mmenuitem_over(x,i){
srcel = getReal(window.event.srcElement, "className", "coolButton");
if(misdown){
	mtoin(srcel);
}
else{
mtoout(srcel);
}
mthestatus = mmenus[x].items[i].statustxt;
if(mthestatus!=""){
	musestatus=true;
	window.status=mthestatus;
}

}
function mmenuitem_out(){
srcel = getReal(window.event.srcElement, "className", "coolButton");
mnochange(srcel);
if(musestatus)window.status="";

}
function mmenuitem_down(){
srcel = getReal(window.event.srcElement, "className", "coolButton");
mtoin(srcel)
misdown=true;
}
function mmenuitem_up(){
srcel = getReal(window.event.srcElement, "className", "coolButton");
mtoout(srcel)
misdown=false;
}
function mexec2(x){
var cmd;
if(mmenus[x].target=="blank"){
  cmd = "window.open(&#39;"+mmenus[x].command+"&#39;)";
}else{
  cmd = mmenus[x].target+".location=\""+mmenus[x].command+"\"";
}
eval(cmd);
}
function mexec(x,i){
var cmd;
if(mmenus[x].items[i].target=="blank"){
  cmd = "window.open(&#39;"+mmenus[x].items[i].command+"&#39;)";
}else{
  cmd = mmenus[x].items[i].target+".location=\""+mmenus[x].items[i].command+"\"";
}
eval(cmd);
}
function mbody_click(){

if (misShow){
	srcel = getReal(window.event.srcElement, "className", "coolButton");
	for(var x=0;x<=mmenus.length;x++){
		if(srcel.id=="mMenu"+x)
		return;
	}
	mallhide();
}
}
document.onclick=mbody_click;
function mwritetodocument(){
      var mwb=1;
                     var stringx=&#39;<table  id=mmenutable border=0 cellpadding=3 cellspacing=2 width=&#39;+mmenuwidth+&#39; height=&#39;+mmenuheight+&#39; bgcolor=&#39;+mmenucolor+
                     &#39; onselectstart="event.returnValue=false"&#39;+
                     &#39; style="position:absolute;cursor:&#39;+mcursor+&#39;;&#39;+mfonts+
                     &#39; border-left: &#39;+mwb+&#39;px solid &#39;+mmenuoutbordercolor+&#39;;&#39;+
                     &#39; border-right: &#39;+mwb+&#39;px solid &#39;+mmenuinbordercolor+&#39;; &#39;+
                     &#39;border-top: &#39;+mwb+&#39;px solid &#39;+mmenuoutbordercolor+&#39;; &#39;+
                     &#39;border-bottom: &#39;+mwb+&#39;px solid &#39;+mmenuinbordercolor+&#39;; padding:0px"><tr>&#39;
                     for(var x=0;x<mmenus.length;x++){
                     	var thismenu=mmenus[x];
                     	var imgsize="";
                     	if(thismenu.sizex!="0"||thismenu.sizey!="0")imgsize=" width="+thismenu.sizex+" height="+thismenu.sizey;
                     	var ifspace="";
                     	if(thismenu.caption!="")ifspace=" ";
                     	stringx += "<td nowrap class=coolButton id=mMenu"+x+" style=&#39;border: "+mitemedge+"px solid "+mmenucolor+
                     	"&#39; width="+mmenuunitwidth+"px onmouseover=mmenu_over(mmenup"+x+
                     	","+x+") onmouseout=mmenu_out("+x+
                     	") onmousedown=mmenu_down(mmenup"+x+","+x+")";
                     	      if(thismenu.command!=""){
                     	          stringx += " onmouseup=mmenu_up();mexec2("+x+");";
                     	      }else{
                     	      	  stringx += " onmouseup=mmenu_up()";
                     	      }
                     	      if(thismenu.pos=="0"){
                     	          stringx += " align=center><img align=absmiddle src=&#39;"+thismenu.img+"&#39;"+imgsize+">"+ifspace+thismenu.caption+"</td>";	
                     	      }else if(thismenu.pos=="1"){
                     	          stringx += " align=center>"+thismenu.caption+ifspace+"<img align=absmiddle src=&#39;"+thismenu.img+"&#39;"+imgsize+"></td>";	
                     	      }else if(thismenu.pos=="2"){
                     	          stringx += " align=center background=&#39;"+thismenu.img+"&#39;> "+thismenu.caption+" </td>";	
                     	      }else{
                     	          stringx += " align=center> "+thismenu.caption+" </td>";
                     	      }
                     	stringx += "";
                     }
                     stringx+="<td width=*> </td></tr></table>";
                     
                     
                     for(var x=0;x<mmenus.length;x++){
                     	thismenu=mmenus[x];
                        if(x==4){
                        stringx+=&#39;<p id=mmenup&#39;+x+&#39; style="visiable:none"></p>&#39;;
                        }else{
                        stringx+=&#39;<p id=mmenup&#39;+x+
                        &#39; style="cursor:&#39;+mcursor+&#39;;position:absolute;&#39;+
                        &#39;width:&#39;+mmenuitemwidth+&#39;px; z-index:&#39;+(x+100);
                        if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
                        stringx+=&#39;;border-left: 1px solid &#39;+mmidoutcolor+
                        &#39;;border-top: 1px solid &#39;+mmidoutcolor;}
                        stringx+=&#39;;border-right: 1px solid &#39;+mmenuinbordercolor+
                        &#39;;border-bottom: 1px solid &#39;+mmenuinbordercolor+&#39;;visibility:hidden" onselectstart="event.returnValue=false">\n&#39;+
                     	&#39;<table  width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" &#39;+
                     	&#39;style="&#39;+mfonts+&#39; border-left: 1px solid &#39;+mmenuoutbordercolor;
                        if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
                     	stringx+=&#39;;border-right: 1px solid &#39;+mmidincolor+
                     	&#39;;border-bottom: 1px solid &#39;+mmidincolor;}
                     	stringx+=&#39;;border-top: 1px solid &#39;+mmenuoutbordercolor+
                     	&#39;;padding: 4px" bgcolor=&#39;+mmenucolor+&#39;>\n&#39;
                     	for(var i=0;i<thismenu.items.length;i++){
                     		var thismenuitem=thismenu.items[i];
                     		var imgsize="";
                     	        if(thismenuitem.sizex!="0"||thismenuitem.sizey!="0")imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey;
                     	        var ifspace="";
                     	        if(thismenu.caption!="")ifspace=" ";
                     		if(!thismenuitem.isline){
                     		stringx += "<tr><td class=coolButton style=&#39;border: "+mitemedge+"px solid "+mmenucolor+
                     		"&#39; width=100% height=15px onmouseover=\"mmenuitem_over("+x+","+i+
                     		");\" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup=";
 				stringx += "mmenuitem_up();mexec("+x+","+i+"); ";
 				if(thismenuitem.pos=="0"){
                     	            stringx += "><img align=absmiddle src=&#39;"+thismenuitem.img+"&#39;"+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>";	
                     	          }else if(thismenuitem.pos=="1"){
                     	            stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src=&#39;"+thismenuitem.img+"&#39;"+imgsize+"></td></tr>";	
                     	          }else if(thismenuitem.pos=="2"){
                     	            stringx += "background=&#39;"+thismenuitem.img+"&#39;>"+thismenuitem.caption+"</td></tr>";	
                     	          }else{
                     	            stringx += ">"+thismenuitem.caption+"</td></tr>";
                     	          }
 				}else{
                     		stringx+=&#39;<tr><td height="1" background="hr.gif" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="none.gif" border="0"></td></tr>\n&#39;;
                     		}
                     	}stringx+=&#39;</table>\n</p>&#39;
                     	}
                     	
                }
                
                     document.write("<p align=&#39;left&#39;>"+stringx+"</p>");
}
function mcheckLocation(){
if(isNaN(mmenuwidth))mmenuwidth=document.body.clientWidth*parseInt(mmenuwidth.substring(0,3))/100;ym=eval(document.body.scrollTop)+document.body.clientHeight-mmenuheight-10;xm=eval(document.body.scrollLeft)+10;y=mmenutable.style.pixelTop;x=mmenutable.style.pixelLeft;if(Math.abs(ym-y)>1)mmenutable.style.pixelTop=y+=(ym-y)/5;else mmenutable.style.pixelTop=y=ym;if(Math.abs(xm-x)>1)mmenutable.style.pixelLeft=x+=(xm-x)/5;else mmenutable.style.pixelLeft=x=xm;setTimeout("mcheckLocation()",10);}

mpmenu1=new mMenu(&#39;File&#39;,&#39;&#39;,&#39;self&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;);
mpmenu1.addItem(new mMenuItem(&#39;New&#39;,&#39;javascript:alert(\\"New\\")&#39;,&#39;self&#39;,false,&#39;New&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu1.addItem(new mMenuItem(&#39;Open&#39;,&#39;javascript:alert(\\"Open\\")&#39;,&#39;self&#39;,false,&#39;Open&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu1.addItem(new mMenuItem(&#39;Save&#39;,&#39;javascript:alert(\\"Save\\")&#39;,&#39;self&#39;,false,&#39;Save&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu1.addItem(new mMenuItem(null,null,null,true));
mpmenu1.addItem(new mMenuItem(&#39;Exit&#39;,&#39;javascript:alert(\\"Exit\\")&#39;,&#39;self&#39;,false,&#39;Exit&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu2=new mMenu(&#39;Edit&#39;,&#39;&#39;,&#39;self&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;);
mpmenu2.addItem(new mMenuItem(&#39;Undo&#39;,&#39;javascript:alert(\\"Undo\\")&#39;,&#39;self&#39;,false,&#39;Undo&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu2.addItem(new mMenuItem(&#39;Forward&#39;,&#39;javascript:alert(\\"Forward\\")&#39;,&#39;self&#39;,false,&#39;Forward&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu2.addItem(new mMenuItem(null,null,null,true));
mpmenu2.addItem(new mMenuItem(&#39;Copy&#39;,&#39;javascript:alert(\\"Copy\\")&#39;,&#39;self&#39;,false,&#39;Copy&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu2.addItem(new mMenuItem(&#39;Paste&#39;,&#39;javascript:alert(\\"Paste\\")&#39;,&#39;self&#39;,false,&#39;Paste&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu3=new mMenu(&#39;Favorites&#39;,&#39;&#39;,&#39;self&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;);
mpmenu3.addItem(new mMenuItem(&#39;My Homepage&#39;,&#39;http://www.KnifeSoft.com&#39;,&#39;blank&#39;,false,&#39;Visit My Homepage&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu3.addItem(new mMenuItem(&#39;Yahoo&#39;,&#39;http://www.yahoo.com&#39;,&#39;blank&#39;,false,&#39;Visit Yahoo&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu4=new mMenu(&#39;Help&#39;,&#39;&#39;,&#39;self&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;);
mpmenu4.addItem(new mMenuItem(&#39;Contect&#39;,&#39;javascript:alert(\\"Contect\\")&#39;,&#39;self&#39;,false,&#39;Contect&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu4.addItem(new mMenuItem(&#39;Send me an email&#39;,&#39;mailto:support@knifesoft.com&#39;,&#39;self&#39;,false,&#39;Send me an email.&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu4.addItem(new mMenuItem(null,null,null,true));
mpmenu4.addItem(new mMenuItem(&#39;About&#39;,&#39;javascript:alert(\\"About\\")&#39;,&#39;self&#39;,false,&#39;About WebMenuShop&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;));
mpmenu4=new mMenu(&#39;KnifeSoft&#39;,&#39;http://www.knifesoft.com&#39;,&#39;self&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;);
mwritetodocument();
mcheckLocation();
</script>





















<br><br><br><br><br><br><br><br><br><br><br><br><br>
<SELECT onchange="window.open(this.value,&#39;&#39;,&#39;&#39;)"> <OPTION>产品快速导航</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=1&amp;CateId=1 selected>多媒体产品</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-hid.htm>  DLP数字光显背投</OPTION> <OPTION value=http://www.tclking.com>  LCD液晶电视</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-hid.htm>  数字高清背投</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-pdp.htm>  PDP等离子电视</OPTION> <OPTION value=http://www.tcl.com/03product/tv/chanpin-crt.htm>  CRT高清彩电</OPTION> <OPTION value=03product/pro2.jsp?cateID=1&amp;CateId=61>  酒店电视</OPTION> <OPTION value=03product/pro2.jsp?cateID=1&amp;CateId=141>  乐华彩电</OPTION> <OPTION value=http://av.tcl.com/03products/List.asp?ListID=246>  视盘机</OPTION> <OPTION value=http://www.tcl.com/03product/mon/index.html>  监视器</OPTION> <OPTION value=http://www.tcl.com/03product/vw/index.html>  电视墙</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=11&amp;CateId=1>通讯产品</OPTION> <OPTION value=http://www.tclmobile.com.cn/mobile/product.jsp?catid=77>  手机</OPTION> <OPTION value=03product/pro2.jsp?cateID=11&amp;CateId=18>  电话机</OPTION> <OPTION value=03product/pro2.jsp?cateID=11&amp;CateId=19>  网络设备</OPTION> <OPTION value=03product/pro2.jsp?cateID=11&amp;CateId=293>  宽带产品</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=12&amp;CateId=1>数码产品</OPTION> <OPTION value=http://www.tcl-digital.com/product/family.asp>  家用电脑</OPTION> <OPTION value=http://www.tcl-digital.com/product/business.asp>  商用电脑</OPTION> <OPTION value=http://www.tcl-digital.com/product/notebook.asp>  笔记本电脑</OPTION> <OPTION value=http://www.tcl-digital.com/product/digital.asp>  DV产品</OPTION> <OPTION value=http://www.tcl-digital.com/product/digital.asp?Cateid=82>  MP3播放器</OPTION> <OPTION value=http://www.go-video.com.cn/html/productshow.asp?sortid=25&amp;sortid2=7>  MP4播放器</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=13&amp;CateId=1>家电产品</OPTION> <OPTION value=03product/pro2.jsp?cateID=13&amp;CateId=25>  电冰箱</OPTION> <OPTION value=03product/pro2.jsp?cateID=13&amp;CateId=26>  洗衣机</OPTION> <OPTION value=http://www.tclac.com/tclaccn/product/product.aspx>  空调</OPTION> <OPTION value=http://www.tclac.com/tclaccn/product/productlist6.aspx>  中央空调</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist1.aspx>  电饭煲</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist2.aspx>  电磁炉</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist3.aspx>  电风扇</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist4.aspx>  饮水机</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist5.aspx>  电暖器</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist6.aspx>  净水器</OPTION> <OPTION value=http://www.nanhaitcl.com/product/productlist7.aspx>  烧烤炉</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=14&amp;CateId=1>电气产品</OPTION> <OPTION value=http://www.tcl-elc.com/main/gb/product/index.jsp>  开关插座</OPTION> <OPTION value=http://www.tcl-lighting.com/products.asp>  照明产品</OPTION> <OPTION value=http://www.tclelec.com/product/product_ljfl.htm>  工业电器</OPTION> <OPTION value=03product/pro2.jsp?cateID=14&amp;CateId=161>  智能楼宇</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=15&amp;CateId=1>部品产品</OPTION> <OPTION value=http://www.asic.com.cn/cn/product.htm>  集成电路</OPTION> <OPTION value=http://www.tclrf.com/products/index.html>  高频头</OPTION> <OPTION value=http://www.tclbattery.com/china/product01.asp>  电池</OPTION> <OPTION style="BACKGROUND: #999; COLOR: #fff" value=03product/pro2.jsp?cateID=16&amp;CateId=1>文化产品</OPTION> <OPTION value=http://www.meikamusic.com/>  美卡音像</OPTION> <OPTION value=http://www.tcl-disc.com/tp.htm>  TCL光盘</OPTION></SELECT>

后来发展到其文字内容可以增、删、编、改,即可以编辑:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>EditSelect</title>
<script>
function isIE(){
a=navigator.appVersion.split(";")
b=a[1].split(" ")
return parseFloat(b[2])
}

if (isIE()<5.5) 
{
     scHTML=&#39;<p id="selectcontent" class="selectp" style="visibility:hidden;"><!--<iframe id=selframe frameborder=0 height=100%></iframe>--><p id="selecthtml" class="selectcontent">selectáD表</p></p>&#39;
}
else
{
     scHTML=&#39;<p id="selectcontent" class="selectp" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><p id="selecthtml" class="selectcontent">selectáD表</p></p>&#39;
}

document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml

function editselect(name,size,defaulttext,width,height,readonly){
  var combo=this;
  this.options=new Array();
  this.oj=new Array();
  this.name=name;
  this.pname=name+&#39;_p&#39;;
  this.buttonname=name+&#39;_button&#39;;
  this.tablename=name+&#39;_table&#39;;
  this.htmltable=name+&#39;_html&#39;
  if (!height) this.height=0; else this.height=height
  if (width) this.width=width
  if (!size) size=8
  if (!defaulttext) defaulttext=""
  if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}
  
  esHTML=&#39;<p id=&#39;+this.pname+&#39;>&#39;
         +&#39;<table id=&#39;+this.tablename+&#39; cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>&#39;
         +&#39;<input type=text class=selecttext size="&#39;+size+&#39;" name=&#39;+name+&#39; value="&#39;+defaulttext+&#39;" &#39;+readonly+&#39;><td><button class=selectbutton id=&#39;+this.buttonname+&#39;>6</td></tr></table>&#39;
         +&#39;</p>&#39;
  document.write(esHTML)
  this.sbutton=eval("document.all."+this.buttonname)
  
  if (this.readonly==1) eval("document.all."+this.name).onclick=function(){combo.show()}  
  
  this.sbutton.onclick=function(){combo.show()}
  this.show=function(){
    pDiv=eval(combo.pname)
    pTable=eval(combo.tablename)
    var vHTML=&#39;<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>&#39;
    for (i=0;i<combo.options.length;i++)
      {
       vHTML+=&#39;<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.&#39;+combo.name+&#39;.value=this.innerText;selectcontent.style.visibility=\&#39;hidden\&#39;;&#39;+combo.oj[i]+&#39;"><td nowrap>&#39;+combo.options[i]
      }
     vHTML+="</table>"
    vDivHtml.innerHTML=vHTML
    
    vtop=pDiv.offsetTop+pDiv.offsetHeight
    vleft=pDiv.offsetLeft+2
    
    
    vParent = pDiv.offsetParent;
     while (vParent.tagName.toUpperCase() != "BODY")
 {
  vleft += vParent.offsetLeft;
  vtop += vParent.offsetTop;
  vParent = vParent.offsetParent;
 }

   var redge=document.body.clientWidth-vleft
   var bedge=document.body.clientHeight-vtop
 
   

 if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}
    

    if (combo.height==0)
      {
        vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
        vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
      }
      else
      {
         if (htmltable.offsetHeight>combo.height)
          {
            vDiv.style.pixelHeight=combo.height
            vDivHtml.style.pixelHeight=combo.height


            } 
           else 
           {
          
              vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
              vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
           }
   
       }
    
    vDivHtml.scrollTop=0
    
    if (redge<vDiv.offsetWidth)
      vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
        else
      vDiv.style.left=vleft-1
      

   if (bedge<vDiv.offsetHeight)
    //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
    vDiv.style.top=vtop-vDiv.offsetHeight+bedge
         else
      vDiv.style.top=vtop
      
    
    vDivHtml.style.width=parseInt(vDiv.style.width)
      vDiv.style.visibility="visible"
  }
  
  this.add=function(text,js){
     combo.options[combo.options.length]=text
     combo.oj[combo.oj.length]=js

  }
  
  this.clearall=function(){
  combo.options=new Array()
  }

  this.about=function(){
  
 }
}


function mo(obj){
obj.style.backgroundColor="#000099"
obj.style.color="#ffffff"
}

function mu(obj){
obj.style.backgroundColor=""
obj.style.color="#000000"
}

document.onmousedown=function(){
if (vDiv.style.visibility=="visible"){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollTop;

x1=vDiv.offsetLeft
y1=vDiv.offsetTop

x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight

if (mx<x1 || my<y1 || x2<mx || y2<my) 
   { 
     vDiv.style.visibility=&#39;hidden&#39;
   }
}
}</script>


<style>
.selecttext{
border:0px
height: 16;
font-family:arial;
font-size:12px;
}
.selectbutton{
font-family:webdings;
font-size:10px;
height: 19;
width: 16; 
border:1px solid #83A5EB;
line-height:0px;
padding-bottom:3px;
background-color:#D1E0FD
}
.selecttable{
font-family:arial;
font-size:12px;
cursor:default;
}
.selectcontent
{
position: absolute;
top:0;
left:0;
overflow:auto;
border:1px solid #000000
}

.selectp
{
position: absolute; 
width:100;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head>

<body bgcolor="#83A5EB" background="http://moodboy.com/puterjam/blog/attachments/month_0408/oldr_cs1.JPG">


<table border="0" width="100%">
 <tr>
  <td width="151" align="center"><font size="2">可编辑的Select</font></td>
  <td><script>
var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("这是一个可以编辑的Select")
sel1.add("支持CSS")
sel1.add("可以通过CSS,修改外形")
sel1.add("突破原来的Select诸多限制")
</script></td>
 </tr>
 <tr>
  <td width="151" align="center"><font size="2">长度可以随意修改
可以设置为只读</font></td>
  <td>
  <script>
var sel2=new editselect("select2","20","长度可以随意修改",250,82,1);
sel2.add("这是一个可以编辑的Select")
sel2.add("支持CSS")
sel2.add("可以通过CSS,修改外形")

sel2.add("作者:舜子制作")
sel2.add("MSN:puterjam@msn.com")
</script>
  </td>
 </tr>
 <tr>
  <td width="151" align="center"><font size="2">可以遮盖系统Select</font></td>
  <td>
  <script>
var sel3=new editselect("select3","25","可以遮盖系统Select","",41);
sel3.add("这是一个可以编辑的Select")
sel3.add("支持CSS")
sel3.add("可以通过CSS,修改外形")
sel3.add("突破原来的Select诸多限制")
</script>
  </td>
 </tr>
 <tr>
  <td width="151" align="right"> </td>
  <td><select><option>系统的Select</option></select> </td>
 </tr>
</table>
</body>

</html>

可编辑的select:

按回车键输入新内容,按DEL删除选中内容<br>
<body bgcolor="#fef4d9" onload="s1.focus();">
<script language="JavaScript">
<!--
function catch_keydown(sel)
{
	switch(event.keyCode)
	{
		case 13:
			//Enter;
			sel.options[sel.length] = new Option("","",false,true);
			event.returnValue = false;
			break;
		case 27:
			//Esc;
			alert("text:" + sel.options[sel.selectedIndex].text + ", value:" + sel.options[sel.selectedIndex].value + ";");
			event.returnValue = false;
			break;
		case 46:
			//Delete;
			if(confirm("删除当前选项!?"))
			{
				sel.options[sel.selectedIndex] = null;
				if(sel.length>0)
				{
					sel.options[0].selected = true;
				}
			}
			event.returnValue = false;
			break;
		case 8:
			//Back Space;
			var s = sel.options[sel.selectedIndex].text;
			sel.options[sel.selectedIndex].text = s.substr(0,s.length-1);
			event.returnValue = false;
			break;
	}
	
}
function catch_press(sel)
{
	sel.options[sel.selectedIndex].text = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
	event.returnValue = false;
}
//-->
</script>
<select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>
<SCRIPT LANGUAGE="Javascript">
function inputToSelect(text,value)
{
i=0;
while(document.all.sel.options[i])
{
   if(document.all.sel.options[i].text == text)
      return 0;
   i++;
}
var oOption = document.createElement("OPTION");
oOption.text=text;
oOption.value=value;
document.all.sel.add(oOption);
}
</SCRIPT>

<input name="inputx" value="请选择或输入相应内容" onclick="if(this.value==&#39;请选择或输入

相应内容&#39;){this.value=&#39;&#39;;}else{}" style="border-left:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;border-

right:0px solid #000000;width:134;height:22px;" autocomplete="off"><span 

style="width:150;overflow:hidden">
	<select id="sel" style="width:150;margin-left:-134;border:1px solid #000000;border-left:0px;height:22px;" 

onChange="inputx.value=value" onClick="inputToSelect(inputx.value,inputx.value)"> 
		<option value="111111111">111111111</option>
		<option value="汉字也可以">汉字也可以</option>
	</select> 
</span>

为了让select里有更多的图片、css修饰及其他静、动态修饰效果,而select本身优先级别太高,其修饰效果很少且不能满足上述要求,遂涌现出很多模拟的select:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
<!--
.n1 {
	border-right: 1px none #999999;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #DBDBDB;
	border-left: 1px solid #999999;
	cursor: default;
	width:80px
}
.n2 {
	background: url(http://www.blueidea.com/bbs/images/oicq.gif) no-repeat center center;
	border-top: 1px solid #999999;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #DBDBDB;
	border-left: 1px none;
	width: 18px;
	cursor: default;
}
.ss {
	color: #FFFFFF;
	background: #0A246A;
}
-->
</style>
<script  lanuage="JScript">
function  turnit(ss)
{

  if  (ss.style.display=="none")  
    {ss.style.display="";
	for (var i=1;i<4;i++)
{
if (eval(&#39;t&#39;+i).innerText==text1.value)
eval(&#39;t&#39;+i).className=&#39;ss&#39;
else
eval(&#39;t&#39;+i).className=&#39;&#39;
}
}

  else
    {ss.style.display="none";   
   }
}
function sele(tid)
{
bb.style.display=&#39;none&#39;;
text1.value=tid.innerText;
}
function over(tid)
{
for (var i=1;i<4;i++)
{
eval(&#39;t&#39;+i).className=&#39;&#39;
}
tid.className=&#39;ss&#39;
if(typeof(prevObj)!=&#39;undefined&#39;)
prevObj.bgColor=&#39;&#39;;
prevObj=tid;
}

function openb()
{
if (bb.style.display==&#39;&#39;)
bb.style.display=&#39;none&#39;
}
</script>
<style type="text/css">
<!--
table {
	font-size: 9pt;
}
-->
</style>
</head>

<body onclick=if(event.srcElement.tagName==&#39;BODY&#39;)bb.style.display=&#39;none&#39;;>
<table width="98" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="98" nowrap>
<input name="text1" type="text" size="10" class=n1 readonly value=请选择 onclick=turnit(bb) onSelectStart=event.returnValue=false><input name="Submit" type="text" class="n2" value="" readonly onclick=turnit(bb)>
      
    </td>
  </tr>
  <tr>
    <td id=bb style=display:none><p id="Layer1" style="position:absolute; width:98px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1;" class="n1"> 
        <table width="100%" border="0" cellpadding="0" cellspacing="0" id=tb onSelectStart=event.returnValue=false>
          <tr> 
            <td  id=t1 onMouseOver =over(this)  onclick=sele(this)>选择1</td>
          </tr>
          <tr> 
            <td id=t2 onMouseOver =over(this)  onclick=sele(this)>选择2</td>
          </tr>
          <tr> 
            <td id=t3 onMouseOver =over(this)  onclick=sele(this)>选择3</td>
          </tr>
         
        </table>
      </p></td>
  </tr>
</table>
</body>
</html>
<center><sup><font face="隶书" color="blue">上标是不是这个?</font></sup><font size="6" face="华文行楷" color="red">如果要想以其他的文字作为上标该怎么做啊?</font><sub><font face="黑体" color="green"><b><i>下标是不是这个?</b></i></font></sub>
<br><br>

下面这两个已达到较高的水准(动态内容):

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>EditSelect</title>
<script>
scHTML=&#39;<p id="selectcontent" class="selectp" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><p id="selecthtml" class="selectcontent">select&Aacute;&ETH;±í</p></p>&#39;
document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml

function editselect(name,size,defaulttext,width,height,readonly){
  var combo=this;
  this.options=new Array();
  this.name=name;
  this.pname=name+&#39;_p&#39;;
  this.buttonname=name+&#39;_button&#39;;
  this.tablename=name+&#39;_table&#39;;
  this.htmltable=name+&#39;_html&#39;
  
  if (!height) this.height=0; else this.height=height
  if (width) this.width=width
  if (!size) size=8
  if (!defaulttext) defaulttext=""
  if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}
  
  esHTML=&#39;<p id=&#39;+this.pname+&#39;>&#39;
         +&#39;<table id=&#39;+this.tablename+&#39; cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>&#39;
         +&#39;<textarea type=text class=selecttext cols="&#39;+size+&#39;" rows="1" name=&#39;+name+&#39; value="&#39;+defaulttext+&#39;" contenteditable="false" &#39;+readonly+&#39;></textarea><td><button class=selectbutton id=&#39;+this.buttonname+&#39;>6</td></tr></table>&#39;
         +&#39;</p>&#39;
  document.write(esHTML)
  this.sbutton=eval("document.all."+this.buttonname)
  
  if (this.readonly==1) eval(this.name).onclick=function(){combo.show()}
  
  this.sbutton.onclick=function(){combo.show()}
  this.show=function(){
    pDiv=eval(combo.pname)
    pTable=eval(combo.tablename)
    var vHTML=&#39;<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>&#39;
    for (i=0;i<combo.options.length;i++)
      {
       vHTML+=&#39;<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.&#39;+combo.name+&#39;.innerHTML=\&#39;\&#39;;var t=document.createElement(\&#39;span\&#39;);t.innerHTML=this.innerHTML;document.all.&#39;+combo.name+&#39;.appendChild(t);selectcontent.style.visibility=\&#39;hidden\&#39;"><td nowrap>&#39;+combo.options[i]
      }
     vHTML+="</table>"
    vDivHtml.innerHTML=vHTML
    
    vtop=pDiv.offsetTop+pDiv.offsetHeight
    vleft=pDiv.offsetLeft+1
    
    
    vParent = pDiv.offsetParent;
    	while (vParent.tagName.toUpperCase() != "BODY")
	{
		vleft += vParent.offsetLeft;
		vtop += vParent.offsetTop;
		vParent = vParent.offsetParent;
	}

   var redge=document.body.clientWidth-vleft
   var bedge=document.body.clientHeight-vtop
 
  	

	if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}
    

    if (combo.height==0)
      {
        vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
        vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
      }
      else
      {
         if (htmltable.offsetHeight>combo.height)
          {
            vDiv.style.pixelHeight=combo.height
            vDivHtml.style.pixelHeight=combo.height


            } 
           else 
           {
          
              vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
              vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
           }
   
       }
    
    vDivHtml.scrollTop=0
    
    if (redge<vDiv.offsetWidth)
      vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
        else
      vDiv.style.left=vleft-1
      

   if (bedge<vDiv.offsetHeight)
    //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
    vDiv.style.top=vtop-vDiv.offsetHeight+bedge
         else
      vDiv.style.top=vtop
      
    
    vDivHtml.style.width=parseInt(vDiv.style.width)
      vDiv.style.visibility="visible"
  }
  
  this.add=function(text){
     combo.options[combo.options.length]=text
  }
  
  this.about=function(){
  
 }
}


function mo(obj){
obj.style.backgroundColor="#000099"
obj.style.color="#ffffff"
}

function mu(obj){
obj.style.backgroundColor=""
obj.style.color="#000000"
}

document.onmousedown=function(){
if (vDiv.style.visibility=="visible"){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollTop;

x1=vDiv.offsetLeft
y1=vDiv.offsetTop

x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight

if (mx<x1 || my<y1 || x2<mx || y2<my) 
   { 
     vDiv.style.visibility=&#39;hidden&#39;
   }
}
}
</script>


<style>
.selecttext{
border:0px
height: 22;
font-family:arial;
font-size:14px;
overflow:hidden;
}
.selectbutton{
font-family:webdings;
font-size:10px;
height: 25;
width: 16; 
border:1px solid #83A5EB;
line-height:0px;
padding-bottom:1px;
background-color:#D1E0FD
}
.selecttable{
font-family:arial;
font-size:12px;
cursor:default;
}
.selectcontent
{
position: absolute;
top:0;
left:0;
overflow:auto;
border:1px solid #000000
}

.selectp
{
position: absolute; 
width:100;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head>

<body bgcolor="#83A5EB" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">

<center>
<table border="0" width="234">
	<tr>
		<td width="151" align="center"><font size="2">可编辑的Select</font></td>
		<td><script>
var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("<marquee behavior=alternate><img src=&#39;http://www.blueidea.com/articleimg/bbsimg/icon6.gif&#39; align=&#39;absmiddle&#39;>  <B><font color=#22FF22>知</font><font color=#FF2222>往</font><font color=#001199>观</font><font color=#00fffa>来</font></B></marquee>")
sel1.add("<img src=&#39;http://www.blueidea.com/articleimg/bbsimg/icon7.gif&#39; align=&#39;absmiddle&#39;>  微风香水")
sel1.add("<img src=&#39;http://www.blueidea.com/articleimg/bbsimg/icon8.gif&#39; align=&#39;absmiddle&#39;>  阳光锈了")
sel1.add("<img src=&#39;http://www.blueidea.com/articleimg/bbsimg/icon9.gif&#39; align=&#39;absmiddle&#39;>  <B><font color=#22FF22>观</font><font color=#FF2222>往</font><font color=#001199>知</font><font color=#00fffa>来</font></B>")
</script></td>
	</tr>
	<tr>
		<td width="151" align="right"> </td>
		<td> </td>
	</tr>
</table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
<!--
.n1 {
	border-right: 1px none #999999;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #DBDBDB;
	border-left: 1px solid #999999;
	cursor: default;
	width:180px
}
.n2 {
	background: url(http://www.blueidea.com/bbs/images/newwin.gif) no-repeat center center;
	border-top: 1px solid #999999;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #DBDBDB;
	border-left: 1px none;
	width: 18px;
	cursor: default;
}
.ss {
	color: #FFFFFF;
	background: #0A246A;
}
-->
</style>
<script  lanuage="JScript">
function  turnit(ss)
{

  if  (ss.style.display=="none")  
    {ss.style.display="";
}

  else
    {ss.style.display="none";   
   }
}
function sele(tid)
{
bb.style.display=&#39;none&#39;;
text1.value=tid.innerText;
}
function over(tid)
{
for (var i=1;i<4;i++)
{
eval(&#39;t&#39;+i).className=&#39;&#39;
}
tid.className=&#39;ss&#39;
}
function out(tid)
{
if (bb.style.display!=&#39;none&#39;)
tid.className=&#39;&#39;
}
</script>
<style type="text/css">
<!--
table {
	font-size: 16pt;font-family:华文行楷;
}
-->
</style>
</head>

<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=green,endColorStr=white);SCROLLBAR-ARROW-COLOR: #fc0048;
 SCROLLBAR-TRACK-COLOR: #242400;
 SCROLLBAR-BASE-COLOR: #24b400;">
<table width="198" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="198" nowrap>
<input name="text1" type="text" size="20" class=n1 readonly value=这里头别无选择 onclick=turnit(bb) style="color:red;font-family:隶书;font-size:14px;text-align:center;background:yellow;"><input name="Submit" type="text" class="n2" value="" readonly onclick=turnit(bb)>
      
    </td>
  </tr>
  <tr>
    <td id=bb style=display:none><p id="Layer1" style="position:absolute; width:198px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1;SCROLLBAR-ARROW-COLOR: #fc0048;
 SCROLLBAR-TRACK-COLOR: #242400;
 SCROLLBAR-BASE-COLOR: #24b400;" class="n1" > 
        <table width="100%" border="0" cellpadding="0" cellspacing="0" id=tb> 
          <tr> 
            <td  id=t1 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=lime,endColorStr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">金翅擘海</td>
          </tr>
          <tr> 
            <td id=t2 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=brown,endColorStr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></td>
          </tr>
          <tr> 
            <td id=t3 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=darckblue,endColorStr=white);"><marquee behavior="alternate"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">海阿洛瓦</marquee></td>
          </tr>
  
          <tr> 
            <td  id=t1 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=pink,endColorStr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">蓝色月光</td>
          </tr>
          <tr> 
            <td id=t2 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=red,endColorStr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle"><B><font color="#22FF22">波</font><font color="#FFdd22">希</font><font color="#001199">米</font><font color="#00fffa">亚 </font></B></td>
          </tr>
          <tr> 
            <td id=t3 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);"><marquee behavior="alternate"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">红色黑客</marquee></td>
          </tr>



       
        </table>
      </p></td>
  </tr>
</table>

可以去掉下拉的小三角,但不可以无边框:

<script>
function myjump(myObj){
myurl=myObj.options[myObj.selectedIndex].value;
window.open(myurl,"newwin","width=300,height=200");
}
</script>
<center>
<select name="menu1" size=3 onChange="myjump(menu1)" style="background-color: 

#CCCCFF; color:#0000FF">
<option selected>文字链接</option>
<option value="http://www.bineon.com/bbs/">霓虹论坛</option>
<option value="http://www.ylqh.com">叶落秋寒</option>
</select>

鼠标移过来select自动下拉:

<style>
<!--
td{font-size:12px; }
body{margin:0px; line-height:20px}
a:link    { color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:hover   { color:#FFFFFF; background-color:#003366; text-decoration:none}

a:active  {color:#FFFFFF; text-decoration:none}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v==&#39;show&#39;)?&#39;visible&#39;:(v==&#39;hide&#39;)?&#39;hidden&#39;:v; }
    obj.visibility=v; }
}
//-->
</script>
<p id="Layer1" style="position:absolute; left:0px; top:0px; width:145px; height:20px; z-index:1; visibility: visible; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;" onMouseMove="MM_showHideLayers(&#39;l2&#39;,&#39;&#39;,&#39;show&#39;)" onMouseOut="MM_showHideLayers(&#39;l2&#39;,&#39;&#39;,&#39;hide&#39;)"></p>
<p>
<select name="select">
  <option selected>鼠标移过来自动下拉</option>
    <option selected>鼠标移过来自动下拉</option>
</select>
<p id="l2" style="position:absolute; left:0px; top:20px; width:142px; border:1px solid #000;visibility: hidden; height: 80px; z-index: 2;" onMouseMove="MM_showHideLayers(&#39;l2&#39;,&#39;&#39;,&#39;show&#39;)" onMouseOut="MM_showHideLayers(&#39;l2&#39;,&#39;&#39;,&#39;hide&#39;)" onClick="MM_showHideLayers(&#39;l2&#39;,&#39;&#39;,&#39;hide&#39;)">
  <table width="100%" height="80"  border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td onMouseOver="this.style.backgroundColor=&#39;#003366&#39;;this.style.color=&#39;#ffffff&#39;"  onMouseOut="this.style.backgroundColor=&#39;#FFFFFF&#39;;this.style.color=&#39;#000000&#39;" onClick="window.open(&#39;http://www.blueidea.com&#39;)" >蓝色月光</td>
    </tr>
    <tr>
      <td onMouseOver="this.style.backgroundColor=&#39;#003366&#39;;this.style.color=&#39;#ffffff&#39;"  onMouseOut="this.style.backgroundColor=&#39;#FFFFFF&#39;;this.style.color=&#39;#000000&#39;" onClick="window.open(&#39;http://www.blueidea.com&#39;)" >红色黑客</td>
    </tr>
    <tr>
      <td onMouseOver="this.style.backgroundColor=&#39;#003366&#39;;this.style.color=&#39;#ffffff&#39;"  onMouseOut="this.style.backgroundColor=&#39;#FFFFFF&#39;;this.style.color=&#39;#000000&#39;" onClick="window.open(&#39;http://www.blueidea.com&#39;)" >




<marquee behavior="alternate"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></marquee>






</td>
    </tr>
    <tr>
      <td onMouseOver="this.style.backgroundColor=&#39;#003366&#39;;this.style.color=&#39;#ffffff&#39;"  onMouseOut="this.style.backgroundColor=&#39;#FFFFFF&#39;;this.style.color=&#39;#000000&#39;" onClick="window.open(&#39;http://www.blueidea.com&#39;)" >














<script language="javascript">
var pltsPop=null;
var pltsoffsetX = 10;
var pltsoffsetY = 15;
var pltsPopbg="#ffffee";
var pltsPopfg="#111111";
var pltsTitle="";
document.write(&#39;<p id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></p>&#39;);
function pltsinits()
{
    document.onmouseover   = plts;
    document.onmousemove = moveToMouseLoc;
}
function plts()
{  var o=event.srcElement;
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
    if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
    pltsPop=o.dypop;
    if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
    {
	pltsTipLayer.style.left=-1000;
	pltsTipLayer.style.display=&#39;&#39;;
	var Msg=pltsPop.replace(/\n/g,"<br>");
	Msg=Msg.replace(/\0x13/g,"<br>");
	var re=/\{(.[^\{]*)\}/ig;
	if(!re.test(Msg))pltsTitle="Sheneyan";
	else{
	  re=/\{(.[^\{]*)\}(.*)/ig;
  	  pltsTitle=Msg.replace(re,"$1")+" ";
	  re=/\{(.[^\{]*)\}/ig;
	  Msg=Msg.replace(re,"");
	  Msg=Msg.replace("<br>","");}
	  var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
       	var content =
      	&#39;<table style="FILTER:alpha(opacity=80) shadow(color=#bbbbbb,direction=150);" id=toolTipTalbe border=0><tr><td width="100%"><table class=selet_bg cellspacing="0" cellpadding="0" style="width:100%" style="font size:9pt;">&#39;+
      	&#39;<tr id=pltsPoptop><th height=12 valign=bottom class=header><p id=topleft align=left>↖&#39;+pltsTitle+&#39;</p><p id=topright align=right style="display:none">&#39;+pltsTitle+&#39;↗</font></th></tr>&#39;+
      	&#39;<tr><td "+attr+" class=f_one style="padding-left:10px;padding-right:10px;padding-top: 4px;padding-bottom:4px;line-height:135%">&#39;+Msg+&#39;</td></tr>&#39;+
      	&#39;<tr id=pltsPopbot style="display:none"><th height=12 valign=bottom class=header><p id=botleft align=left>↙&#39;+pltsTitle+&#39;</p><p id=botright align=right style="display:none">&#39;+pltsTitle+&#39;↘</font></th></tr>&#39;+
      	&#39;</table></td></tr></table>&#39;;
       	pltsTipLayer.innerHTML=content;
       	toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
       	moveToMouseLoc();
       	return true;
       }
    else
    {
    	pltsTipLayer.innerHTML=&#39;&#39;;
      	pltsTipLayer.style.display=&#39;none&#39;;
       	return true;
    }
}

function moveToMouseLoc()
{
	if(pltsTipLayer.innerHTML==&#39;&#39;)return true;
	var MouseX=event.x;
	var MouseY=event.y;
	//window.status=event.y;
	var popHeight=pltsTipLayer.clientHeight;
	var popWidth=pltsTipLayer.clientWidth;
	if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
	{
	  	popTopAdjust=-popHeight-pltsoffsetY*1.5;
	  	pltsPoptop.style.display="none";
	  	pltsPopbot.style.display="";
	}
	 else
	{
	   	popTopAdjust=0;
	  	pltsPoptop.style.display="";
	  	pltsPopbot.style.display="none";
	}
	if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
	{
		popLeftAdjust=-popWidth-pltsoffsetX*2;
		topleft.style.display="none";
		botleft.style.display="none";
		topright.style.display="";
		botright.style.display="";
	}
	else
	{
		popLeftAdjust=0;
		topleft.style.display="";
		botleft.style.display="";
		topright.style.display="none";
		botright.style.display="none";
	}
	pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
	pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
  	return true;
}
pltsinits();

	  </script>


<img border="0" alt="<img border=&#39;0&#39; src=&#39;http://pic1.blueidea.com/bbs/icon7.gif&#39;>" src="http://www.blueidea.com/articleimg/usericon/sheneyan.gif">
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:社區,圖書館和資源Python vs. JavaScript:社區,圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript:所有工作方式從C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。