javascript+css实现美化select下拉菜单程序-自学php网

javascript+css实现美化select下拉菜单程序

来源：自学PHP网时间：2014-09-19 14:47 作者：阅读:次

[导读] 本文章总结了两款javascript+css实现美化select下拉菜单的实例程序代码，有需要美化select的朋友可参考本教程。...

代码如下

复制代码

测试

再看一个实例

代码如下

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>用javascript美化Select</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:50px; }
.iDiv {
position:absolute;
height:19px;
font-size:12px;
color:#333;
line-height:19px;
text-indent:4px;
vertical-align:middle;
border:1px solid #7f9db9;
cursor:default;
cursor:pointer;
background:url(http://pet.runsky.com/img/select_bg.gif) no-repeat 100% 0;
}
.iDiv_over { color:#f96; background-position:100% -25px; }
.iDiv_out { color:#333; background-position:100% 0; }
.cDiv {
position:absolute;
moz-user-select:none;
border:1px solid #7f9db9;
cursor:default;
background:#fff;
overflow:auto;
z-index:1;
}
.cDiv ul {
font-size:12px;
color:#878787;
listStyle:none;
margin:0;
padding:0;
}
.cDiv ul li {
height:24px;
line-height:24px;
text-indent:4px;
}
</style>
<script type="text/javascript">
// JavaScript Document
function $() {
return document.getElementById(arguments[0]);
}
//取得外部class的属性值
function getCurrentStyle(o) {
return o.currentStyle||document.defaultView.getComputedStyle(o,null);
}
var SetAllSelects = {
Offset:function(e) {
  var t = e.offsetTop;
  var l = e.offsetLeft;
  var w = e.offsetWidth;
  var h = e.offsetHeight;
  while(e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; }
  return {top:t, left:l, width:w, height:h};
},
setCreated:function(obj,status) { //设置属性
  obj.setAttribute("childCreated",status);
},
getCreated:function(obj) { //获取属性
  var status = obj.getAttribute("childCreated");
  if(status == null) { status = ""; }
  return status;
},
setSelectStyle:function(obj,idnum,showHeight) {
  if(obj.id == null || obj.id == "") { obj.id = "selectID_"+idnum; }
  var offset = this.Offset(obj);
  obj.style.visibility = "hidden";
  var mainDiv = document.createElement("div");
  var iDiv = document.createElement("div");
  var js_select_;
  var _this = this;
  iDiv.className = "iDiv";
  iDiv.id = js_select_+obj.id;
  iDiv.style.width = offset.width + "px";
  iDiv.style.top = offset.top + "px";
  iDiv.style.left = offset.left + "px";
  this.setCreated(iDiv,"");
  mainDiv.appendChild(iDiv);
  var tValue = obj.options[obj.selectedIndex].innerHTML;
  iDiv.innerHTML = tValue;
  iDiv.onmouseover = function() { iDiv.className = "iDiv iDiv_over"; }
  iDiv.onmouseout = function() { iDiv.className = "iDiv iDiv_out"; }
  iDiv.onclick = function() {
   var created = _this.getCreated(this);
   if (created != "") {
    if (created == "open") {
     this.nextSibling.style.display = "none";
     _this.setCreated(this,"close");
    }
    else {
     _this.setCreated(this,"open");
     var arrLiObj = this.nextSibling.getElementsByTagName("li");
     var selOjbIndex = 0;
     for(var i=0;i<arrLiObj.length;i++) {
      var status = arrLiObj[i].getAttribute("liSelected");
      if(status == null) { status = ""; }
      if(status == "selected") { selOjbIndex = i; break; }
     }
     arrLiObj[selOjbIndex].style.background = "#fff";
     arrLiObj[selOjbIndex].style.color = "#878787";
     this.nextSibling.style.display = "block";
    }
   }
   else {
    _this.setCreated(this,"open");
    var cDiv = document.createElement("div");
    cDiv.className = "cDiv";
    cDiv.style.width = offset.width + "px";
    cDiv.style.height = obj.options.length * 19 + "px";
    if(parseInt(cDiv.style.height)>showHeight) {
     cDiv.style.height = showHeight + "px";
    }
    cDiv.style.top = (offset.top+parseInt(getCurrentStyle(this).height)+1) + "px";
    cDiv.style.left = offset.left + "px";
    cDiv.onselectstart = function() {return false;};
    var uUl = document.createElement("ul");
    cDiv.appendChild(uUl);
    mainDiv.appendChild(cDiv);
    for (var i=0;i<obj.options.length;i++) {
     var lLi = document.createElement("li");
     lLi.id = obj.options[i].value;
     lLi.innerHTML = obj.options[i].innerHTML;
     lLi.sValue = obj.options[i].value;
     uUl.appendChild(lLi);
    }
    var liObj = uUl.getElementsByTagName("li");
    if(liObj.length>0) {
     for (var j=0;j<obj.options.length;j++) {
      liObj[j].onmouseover = function() {
       var arrLiObj = this.parentNode.getElementsByTagName("li");
       for(var i=0;i<arrLiObj.length;i++) {
        var status = "";
        var _background = "#ccc";
        var _color = "#000";
        if(arrLiObj[i] != this) {
         _background = "#fff";
         _color = "#878787";
         status = "selected";
        }
        arrLiObj[i].style.background = _background;
        arrLiObj[i].style.color = _color;
        arrLiObj[i].setAttribute("liSelected",status);
       }
      }
      liObj[j].onclick = function() {
       obj.options.length = 0;
       obj.options[0] = new Option(this.innerHTML,this.sValue);
       this.parentNode.parentNode.style.display = "none";
       _this.setCreated(this.parentNode.parentNode.previousSibling,"close");
       iDiv.innerHTML = this.innerHTML;
      };
      liObj[0].style.background = "#ccc";
      liObj[0].style.color = "#000";
      liObj[0].setAttribute("liSelected","selected");
     }
    }
   }
  }
  document.body.appendChild(mainDiv);
},
setAllSelectStyle:function() {
  var s = document.getElementsByTagName("select");
  for (var i=0; i<s.length; i++) {
   if(s[i].className == "select") {
    this.setSelectStyle(s[i],i,200);
   }
  }
}
}
document.onclick = function(e) {
e = e || window.event;
var target = e.target || event.srcElement;
var s = document.getElementsByTagName("select");
var js_select_;
for (var i=0; i<s.length; i++) {
  if(s[i].className == "select") {
   var objdivtmp = $(js_select_+s[i].id);
   var created = SetAllSelects.getCreated(objdivtmp);
   if (created == "open") {
    if(target != objdivtmp) {
     objdivtmp.nextSibling.style.display = "none";
     SetAllSelects.setCreated(objdivtmp,"close");
    }
   }
  }
}
}
window.onload = function() {
SetAllSelects.setAllSelectStyle();
}
function getValue() {
var kk = document.getElementsByTagName('select')[0];
return kk.options[kk.selectedIndex].value;
}
function getTxt() {
var kk = document.getElementsByTagName('select')[0];
return kk.options[kk.selectedIndex].innerHTML;
}
</script>
</head>
<body style=" text-align:center">
<div style=" width:900px; height:20px; background:#f00;">
<div style=" width:100px; float:right; background:#fff;">
<select class="select">
        <option value="3_1">选择</option>
        <option value="3_2">选择3_22_22_22_2</option>
        <option value="3_3">选择3_22_22_22_3</option>
        <option value="3_4">选择3_22_22_22_4</option>
        <option value="3_5">选择3_22_22_22_5</option>
        <option value="3_6">选择3_22_22_22_6</option>
        <option value="3_7">选择3_22_22_22_7</option>
        <option value="3_8">选择3_22_22_22_8</option>
        <option value="3_9">选择3_22_22_22_9</option>
        <option value="3_10">选择3_22_22_22_10</option>
        <option value="3_11">选择3_22_22_22_11</option>
        <option value="3_12">选择3_22_22_22_12</option>
        <option value="3_13">选择3_22_22_22_13</option>
        <option value="3_14">选择3_22_22_22_14</option>
        <option value="3_15">选择3_22_22_22_15</option>
        <option value="3_16">选择3_22_22_22_16</option>
</select>
</div>
</div>
</body>
</html>

JavaScript中变量作用域详细介绍

js实现文字有动画的滑过缓冲效果

子栏目

javascript+css实现美化select下拉菜单程序

最新评论

添加评论

更多文章推荐

添加评论