DOM事件探秘--编程挑战
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
- {
margin: 0;
padding: 0;
font-size: 13px;
}
width: 186px;
margin: 80px auto;
position: relative;
z-index: 10000;
}/ 选择框 /
divselect cite {width: 184px;
height: 24px;
line-height: 24px;
display: block;
color: #807a62;
cursor: pointer;
font-style: normal;
text-indent:1em;
border: 1px solid gray;
background: url(xjt.png) no-repeat right center;
}/ 选项项样式 /
divselect ul{display:none;
width: 184px;
border: 1px solid gray;
border-top:none;
}cursor: pointer;
list-style:none;
text-indent:1em;
height: 24px;
line-height: 24px;
}
</style><script type="text/javascript">
window.onload = function () {
var oCite = document.getElementsByTagName('cite')[0];
var oUl = document.getElementsByTagName('ul')[0];
var oLis = oUl.getElementsByTagName('li');
var litxt = null;
var x = -1;
var y = null;
/ cite点击效果 /
oCite.onclick = cliFun;
function cliFun(e) {
e = event || window.event;
/取消事件冒泡/
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
oUl.style.display = 'block';
}
/* 点击页面空白地方，选择框消失 */
document.onclick = function () {
oUl.style.display = 'none';
litxt = null;
}
/* 鼠标浮动在每个选择项上面时，背景颜色改变 */
for (var i = 0, l = oLis.length; i < l; i++) {
oLis[i].onmouseover = function () {
this.style.background = 'silver';
}
oLis[i].onmouseout = function () {
this.style.background = '#fff';
}
// 点击选择项时，改变cite的内容
oLis[i].onclick = function () {
oCite.innerHTML = this.innerHTML;
}
}
/* 键盘事件 */
document.onkeydown = function (e) {
e = event || window.event;
// y用来记录上一次键盘的选项索引
y = x;
/*取消事件冒泡*/
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
//按下向下键
if (e.keyCode == 40) {
oUl.style.display = 'block';
x = x + 1;
if (x > oLis.length-1) {
x = 0;
}
oLis[x].style.background = 'silver';
oLis[y].style.background = '#fff';
litxt = oLis[x].innerHTML;
}
//按下向上键
if (e.keyCode == 38) {
oUl.style.display = 'block';
x = x - 1;
if (x < 0) {
x = oLis.length-1;
}
oLis[x].style.background = 'silver';
oLis[y].style.background = '#fff';
litxt = oLis[x].innerHTML;
}
//按下回车键
if (e.keyCode == 13) {
oCite.innerHTML = litxt;
oUl.style.display = 'none';
}
//按下esc键盘
if (e.keyCode == 27) {
oUl.style.display = 'none';
x=-1;
}
}}
</script>
</head>
<body>
<div id="divselect">
<cite>请选择分类</cite>
<ul>
<li>ASP开发</li>
<li>.NET开发</li>
<li>PHP开发</li>
<li>Javascript开发</li>
<li>Java特效</li>
</ul>
</div>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
