动态下拉框

最新推荐文章于 2024-04-25 20:22:26 发布

xlhu618

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量730

点赞数

分类专栏： html 文章标签： html

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<%@ 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>

xlhu618

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态下拉框

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>JS动态下拉列表* {margin:0; padding:0}body {font:12px/20px "Consolas", "Microsoft YaHei"; color:#333;backgroun
复制链接

扫一扫