JS动态下拉列表框

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>JS动态下拉列表</title>
<style type="text/css">
* {margin:0; padding:0}
body {font:12px/20px "Consolas", "Microsoft YaHei"; color:#333;background:#EFEFEF; overflow:hidden}
ul, li {list-style:none}
.cf {zoom:1}
.cf:after {clear:both; content:"."; display:block; visibility:hidden; height:0}
.wrap {width:980px; margin:0 auto; padding:100px 0 0}
opacity:0.5; filter:alpha(opacity=50);left:5px; top:5px; z-index:5}
#banner li span:hover {opacity:0.3; filter:alpha(opacity=30); border:10px solid #000; background:#fff;}
dl {width:200px;position:relative; margin:0 auto}
dt {background:#FFF url(images/arrow.gif) no-repeat 180px center; text-indent:20px; font-size:14px; color:#333; height:30px; line-height:30px; cursor:pointer}
dd {background:#FFF; text-indent:20px; font-size:12px; color:#444; height:30px; line-height:30px; cursor:pointer; width:200px; opacity:0; filter:alpha(opacity=0); border-top:1px solid #2ea6ff}
dd:hover {background:#2ea6ff; color:#FFF}
</style>
</head>
<body>
<div class="wrap">
	<dl id="cbo">
		<dt>请选择</dt>
		<dd>ASP源码下载</dd>
		<dd>PHP源码下载</dd>
		<dd>JSP源码下载</dd>
		<dd>DELPHI源码下载</dd>
		<dd>JAVA源码下载</dd>
		<dd>VC++源码下载</dd>
		<dd>VB源码下载</dd>
	</dl>
</div>
<script type="text/javascript">
var JSHELPER = {
	initi: function() {	
	},
	animate: function(obj, attrList, callback) {
		clearInterval(obj.timer);
		obj.timer = setInterval(function() {
			var isStop = true;
			for(var attr in attrList) {
				var curAttr = attr === "opacity" ? Math.round(parseFloat(JSHELPER.getStyle(obj, attr) * 100)) : parseInt(JSHELPER.getStyle(obj, attr));
				var speed = (attrList[attr] - curAttr) / 8;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				if(attr === "opacity") {
					obj.style.filter = "alpha(opacity=" + (curAttr + speed) + ")";
					obj.style.opacity = (curAttr + speed) / 100;
				} else {
					obj.style[attr] = curAttr + speed + "px";
				}
				curAttr != attrList[attr] && (isStop = false);
			}
			if(isStop) {
				clearInterval(obj.timer);
				!!callback && callback();
			}
		}, 15);
	},
	$: function(params) {
		switch (params.charAt(0)) {
			case "#":
				return document.getElementById(params.substring(1));
				break;
			case ".":
				return this.getByClass(document, params.substring(1));
			default:
				return document.getElementsByTagName(params);
		}
	},
	getStyle: function(obj, attr) {
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
	},
	getByClass: function(pn, cn) {
		var ae = pn.getElementsByTagName("*"), 
			rent = [],
			re = new RegExp('\\b' + cn + '\\b', 'i');
		for(var i = 0, len = ae.length; i < len; i++) {
			ae[i].className.search(re) != -1 && rent.push(ae[i]);
		}
		return rent;
	}
};

​x
 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>JS动态下拉列表</title>
<style type="text/css">
* {margin:0; padding:0}
body {font:12px/20px "Consolas", "Microsoft YaHei"; color:#333;background:#EFEFEF; overflow:hidden}
ul, li {list-style:none}
.cf {zoom:1}
.cf:after {clear:both; content:"."; display:block; visibility:hidden; height:0}
.wrap {width:980px; margin:0 auto; padding:100px 0 0}
opacity:0.5; filter:alpha(opacity=50);left:5px; top:5px; z-index:5}
#banner li span:hover {opacity:0.3; filter:alpha(opacity=30); border:10px solid #000; background:#fff;}
dl {width:200px;position:relative; margin:0 auto}
dt {background:#FFF url(images/arrow.gif) no-repeat 180px center; text-indent:20px; font-size:14px; color:#333; height:30px; line-height:30px; cursor:pointer}

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

JS动态下拉列表框

分类

网站常用

描述

一个动感十足的JS下拉框，点击会渐变分开，选择值后会动态消失，我不知如何形容，想看的点开运行代码功能，可看到效果，反正网上我没见到过类似的，和垂直菜单很相似，无使用jQuery，纯JavaScript+CSS+HTML实现，推荐给大家。