漂亮下拉列表框

稿源：互联网 2022-04-02 21:42:50 点击： 6164 撤稿纠错

挺漂亮的一个下拉框，能自定义显示数目，带关闭功能。

以下讨论的是和列表框相关的漂亮下拉列表框教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 漂亮的下拉菜单 站长特效网</title>
<style type="text/css">
body{font-size:12px;}
input{border:1 solid #666;color:#666666;}
ul{list-style-type:none;margin:0px;overflow:auto;}
li{padding:3px; cursor:default;width:100%;height:20px;}
.open{background:url('/img/open_20100903.gif');background-repeat:no-repeat;background-position:right;}
.close{background:url('/img/close_20100903');background-repeat:no-repeat;background-position:right;}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<script language="javascript">
function _$(objName) {return eval("document.getElementById('"+ objName +"')");}
function _zzjs()
{//欢迎来到站长特效 网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 // 创建对象
 var creatediv = function()
 {
  var divobj = document.createElement("div");
  divobj.id = "_option";
  divobj.style.width = "108px";
  divobj.style.border = "1px solid #666";
  divobj.style.borderTopWidth = "0px";
  divobj.style.position = "absolute";
  divobj.style.top = "85px";
  divobj.style.left = "10px";  // 下拉列表的定位
  divobj.innerHTML = "<ul><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>请选择</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>陕西省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>河南省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>湖北省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>浙江省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>山东省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>河北省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>湖南省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>广东省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>江苏省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>福建省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>辽宁省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>青海省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>云南省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>海南省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>黑龙江省</li><li onclick='sel(this);' onmouseover='_mouse(this,"over");' onmouseout='_mouse(this,"out");'>甘肃省</li></ul>"
  document.body.appendChild(divobj);
  var listCount = 10;  // 列表可显示多少项
  var listHeight = 20; // 每一项的高度 (px)
  if (_$("_option").firstChild.childNodes.length > listCount) _$("_option").firstChild.style.height = ""+ parseInt(listCount * listHeight,10) +"px";
  _$("s").setAttribute("className","close");
  // 选中当前已选中项
  var s = _$("s").value;
  for (var i=0;i<_$("_option").firstChild.childNodes.length;i++)
  {
   if (s == _$("_option").firstChild.childNodes[i].innerText)
   {
    _$("_option").firstChild.childNodes[i].style.backgroundColor = "#fcc";
    _$("_option").firstChild.scrollTop = i * listHeight;
    break;
   }
  }
}//欢迎来到 站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 // 删除对象
 var closediv = function()
 {
  //_$("_option").style.display = "none";
  if (_$("_option"))
  {
   var _option = _$("_option");
   document.body.removeChild(_option);
   _$("s").setAttribute("className","open");
  }
 }
 // 鼠标移动后使项背景变色
 _mouse = function(obj,act)
 {
  obj.style.backgroundColor = act == "over" ? "#cfc" : "#fff";
 }
 // 单击取消下拉框
 document.onclick = function() {if (event.srcElement.id != "s") closediv();}
 // 选择
 sel = function(obj)
 {
  var _opt = obj.innerHTML;
  _$("s").value = _opt;
  closediv();
 }
 // 初始化
 {
  if (_$("_option") == null) creatediv();
  else closediv();
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站 收集大量高质量js代码，还有许多广告代码下载。
</script>
<form action="" method="post">
<input type="text" name="s" id="s" size="14" value="请选择" readonly="true" onClick="_zzjs();" class="open">
</form>
</body>
</html>

关于漂亮下拉列表框的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010092464891.shtml方便下次再访问哦。

·上一篇： 登陆框隐藏效果
·下一篇： 限制文本框输入的数字数值大小

漂亮下拉列表框

文章分类LIST >>返回首页

最新游戏

最新新闻