为了账号安全,请及时绑定邮箱和手机立即绑定

DOM事件探秘--编程挑战

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">

  • {
    margin: 0;
    padding: 0;
    font-size: 13px;
    }
divselect {
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;
}
divselect ul li{
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>

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消