动态下拉框
宗翔宇
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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;
}
};
window.onload = function() {
var cbo = JSHELPER.$("#cbo"),
ddList = JSHELPER.$("dd"),
len = ddList.length, isShow = false;
for(var i = 0; i < len; i++) {
ddList[i].style.left = (i % 2 === 0) ? (-ddList[i].offsetWidth + "px") : (ddList[i].offsetWidth + "px");
ddList[i].style.top = ddList[i].offsetTop + "px";
}
for(var i = 0; i < len; i++) {
ddList[i].style.position = "absolute";
ddList[i].style.display = "none";
}
cbo.children[0].onclick = function() {
if(!isShow) {
var i = 0;
var timer = setInterval(function() {
ddList[i].style.display = "block";
JSHELPER.animate(ddList[i], {left: 0, opacity: 100});
i++;
if(i === len) {
clearInterval(timer);
}
}, 30);
isShow = true;
} else {
var m = len - 1;
var timerb = setInterval(function() {
JSHELPER.animate(ddList[m], {left: ((m % 2 === 0) ? -ddList[m].offsetWidth : ddList[m].offsetWidth), opacity: 0});
m--;
if(m < 0) {
setTimeout(function() {
for(var n = 0; n < len; n++) {
ddList[n].style.display = "none";
}
}, 200);
clearInterval(timerb);
}
}, 30);
isShow = false;
}
};
for(var i = 0; i < len; i++) {
(function(y) {
ddList[y].onclick = function() {
cbo.children[0].innerHTML = ddList[y].innerHTML;
var m = len - 1;
var timerb = setInterval(function() {
JSHELPER.animate(ddList[m], {left: ((m % 2 === 0) ? -ddList[m].offsetWidth : ddList[m].offsetWidth), opacity: 0});
m--;
if(m < 0) {
setTimeout(function() {
for(var n = 0; n < len; n++) {
ddList[n].style.display = "none";
}
}, 200);
clearInterval(timerb);
}
}, 30);
isShow = false;
};
})(i);
}
};
</script>
</body>
</html>
类似资料：