二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
body,
ul,
li {
margin: 0;
padding: 0;
font-size: 13px;
} ul,
li {
list-style: none;
} #divselect {
width: 186px;
margin: 80px auto;
position: relative;
z-index: 10000;
} #divselect cite {
width: 150px;
height: 24px;
line-height: 24px;
display: block;
color: #807a62;
cursor: pointer;
font-style: normal;
padding-left: 4px;
padding-right: 30px;
border: 1px solid #333333;
background: url(xjt.png) no-repeat right center;
} #divselect ul {
width: 184px;
border: 1px solid #333333;
background-color: #ffffff;
position: absolute;
z-index: 20000;
margin-top: -1px;
display: none;
} #divselect ul li {
height: 24px;
line-height: 24px;
} #divselect ul li a {
display: block;
height: 24px;
color: #333333;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('divselect'),
title = box.getElementsByTagName('cite')[0],
menu = box.getElementsByTagName('ul')[0],
as = box.getElementsByTagName('a'),
index = -1; // 点击三角时
title.onclick = function(event) {
event = event || window.event;
menu.style.display = 'block';
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
document.onkeyup = function(event) {
event = event || window.event;
if (event.keyCode == 40) {
index++;
if (index >= as.length) index = 0;
for (var i = 0; i < as.length; i++) {
as[i].style.background = '#fff';
}
as[index].style.background = '#ccc';
}
if (event.keyCode == 38) {
index--;
if (index < 0) index = as.length - 1;
for (var i = 0; i < as.length; i++) {
as[i].style.background = '#fff';
}
as[index].style.background = '#ccc';
}
if (event.keyCode == 13) {
for (var i = 0; i < as.length; i++) {
as[i].style.background = '#fff';
}
title.innerHTML = as[index].innerHTML;
menu.style.display = 'none';
}
}
} // 滑过滑过、离开、点击每个选项时
for (var i = 0; i < as.length; i++) {
as[i].num = i
as[i].onmouseover = function() {
this.style.background = '#ccc'
index = as[i].num - 1;
}
as[i].onmouseout = function() {
this.style.background = '#fff'
}
as[i].onclick = function(event) {
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
menu.style.display = 'none';
title.innerHTML = this.innerHTML;
}
} // 点击页面空白处时
document.onclick = function() {
menu.style.display = 'none';
}
}
</script>
</head> <body>
<div id="divselect">
<cite>请选择分类</cite>
<ul>
<li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
<li><a href="javascript:;" selectid="2">.NET开发</a></li>
<li><a href="javascript:;" selectid="3">PHP开发</a></li>
<li><a href="javascript:;" selectid="4">Javascript开发</a></li>
<li><a href="javascript:;" selectid="5">Java特效</a></li>
</ul>
</div>
</body> </html>
</body> </html>
二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单的更多相关文章
- 二、JavaScript语言--事件处理--DOM事件探秘
第一章 事件流 事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netsca ...
- 第一百四十六节，JavaScript，百度分享保持居中--下拉菜单
JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...
- 【JavaScript 11—应用总结】：下拉菜单
导读:在web页面的显示中,总是免不了下拉菜单的设置.怎样将菜单设置的更好玩一点呢?这次,就将实现一个下拉菜单的制作.当鼠标移入的时候,菜单显示,鼠标移走,菜单关闭. 一.实现分析 首先,制作一个下拉 ...
- 第一百三十二节，JavaScript，封装库--下拉菜单
JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...
- 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- JS 下拉菜单
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 何使用CSS写出一个下拉菜单。
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步 : 首页我们打开Subli ...
- Bootstrap入门（十）组件4：按钮组与下拉菜单结合
Bootstrap入门(十)组件4:按钮组与下拉菜单结合 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) < ...
- jquery 实现下拉菜单
Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js 版本不限 : 接下来把=================== ...
随机推荐
- MongoDB的索引（三）
MongoDB的索引: 1. _id索引 该索引是大多数集合默认创建的索引,也就是说用户每插入一个数据,MongoDB会自动生成一条唯一的_id字段. 2. 单键索引 单键索引是最普通的索引,它不会自 ...
- union联合体
今天笔试的一道题,好久没用union了,竟然忘光光了. 关于其大小的计算,分两步:先算对齐大小(成员中字节最大的那个),再算分配空间: 不仅是对齐大小的整数倍,还要满足实际大小不能小于最大成员大小. ...
- 高性能图片服务器–ZIMG
2011年李彦宏在百度联盟峰会上就提到过互联网的读图时代已经到来1,图片服务早已成为一个互联网应用中占比很大的部分,对图片的处理能力也相应地变成企业和开发者的一项基本技能.需要处理海量图片的典型应用有 ...
- mysql 将指定列的浮点数转化为整数
mysql 将指定列的浮点数转化为整数: update A set B = cast(B as decimal(10,0)) -- 或者 update A set B = round(B,0) 例 ...
- 【GoLang】GoLang 的流程与函数
003.GO流程与函数 1 概述 1.1 Go中流程控制分三大类:条件判断,循环控制和无条件跳转 2 流程 2.1 if 2.1.1 if条件判断语句中不需要括号 2.1.2 条件判断语句里面允许声明 ...
- [k]自定义样式下拉菜单
自定义样式下拉菜单-1 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> & ...
- Java I/O模型的简单说明
1.同步和异步 同步:如果有多个任务或者事件要发生,这些任务或者事件必须逐个地进行,一个事件或者任务的执行会导致整个流程的暂时等待,这些事件没有办法并发地执行,最简单的例子就是顺序的执行两个方法,当第 ...
- 手记-数学分析(高等数学)中有关算法效率的公式列举(O,Θ,Ω)
权当数据结构与算法分析的学习手记 系数为一的幂级数部分和公式 ∑ n2 = 12 + 22 + 32 + ... + n2 = n(n+1)(2n+1)/6 = O(n3) ∑ n3 = ...
- FFmpeg 官方 20160227 之后 追加 libmfx 无法在 xp 上运行的解决方法
修改三个地方 _wfopen_s _wfopen strncpy_s strncpy swscanf_s swscanf 下载 fixffmpeg.7z, fixff.cmd FixFFmpeg.ex ...
- Python~Outlook
用python处理outlook邮件 按季度将邮件分类,归入新建文件夹2016Q1,2015Q4等等 http://www.tuicool.com/articles/Fra22mq Python读取O ...