1.下拉框联动
下拉框联动效果用于在两个或多个内容相关联的下拉框中选取数据，比如在招聘网站中选择求职意向时，需要先选择行业，再根据行业选择职位。
页面初始化时，应该动态生成省下拉框中的选项，并为省添加onchange事件，在更改省下拉框的内容时通知程序对市下拉框的内容进行刷新。
清空下拉框中的选项可以通过清空下拉框中的options数组实现。
下拉框对象.options.length = 0; //清空下拉框选项
下拉框对象.options[索引] = new Option(显示文本, 提交的值);
对象.focus();
调用focus()方法将焦点移动到关联下拉框，提示用户进行选择。
案例：下拉框联动
2.二级下拉菜单
菜单是页面设计中经常使用的元素，遗憾的是，HTML本页并没有提供菜单标记，需要通过JavaScript脚本编程实现。常见的菜单样式有横向菜单、纵向菜单、下拉菜单、折叠菜单等
(1)菜单项存储
菜单项本身具有列表结构，可以使用嵌套的无序列表进行描述，列表项中放置超链接标记，记录单击菜单项后的跳转地址，如下所示：
(2)菜单的样式
对于一级菜单，需要水平显示，需要设置菜单项的float样式为left；对于二级菜单，应该默认的垂直显示状态，二级菜单初始不可见，可以通过将二级菜单设置为绝对定位，并将left样式指定为-1000px的方式进行隐藏。当鼠标移动到一级菜单项上，再恢复对应的二级菜单的left样式。
/*主菜单列表样式*/
#nav {
list-style-type: none; /*隐藏默认的列表符号*/
}
/*一级菜单项样式*/
#nav li {
float: left; /*列表项向左浮动*/
width: 80px; /*指定菜单项宽度*/
}
/*二级菜单列表的样式*/
#nav li ul {
position: absolute;
left:-1000px; /*将left坐标设置为负值，起到隐藏二级菜单项的作用*/
list-style-type: none;
}
/*鼠标移动到一级菜单后应用的样式*/
#nav li.mouseover ul {
left: auto; /*取消left属性默认-1000px的设置，显示二级菜单项*/
}
(3)事件处理
需要为所有的一级菜单项添加鼠标移上和鼠标输出事件，在鼠标移上事件中，让当前菜单项应用“mouseover”样式，显示其二级子菜单。在鼠标移出事件中，取消对“mouseover”样式的引用，隐藏二级子菜单。
(4)主要技术
如果手工为每一个一级菜单项添加事件比较麻烦，可以在页面加载完毕后，通过JavaScript获取所有的一级菜单项，通过代码添加事件。因为一级菜单项与二级菜单项都使用
- 标记，再获取其下级子节点的方式获取，如下所示
document.getElementById("nav").getElementsByTagName("li")
案例：横向二级下拉菜单
3.固定位置的广告
因为希望广告放置于页面特定的职位中，所以应该通过CSS将广告元素的布局方式更改为绝对定位（position:absolute），具体做法是将广告图片与关闭广告的文字放入id属性为“ad”层中，再用过CSS指定层的样式，如下所示：
#ad {
position:absolute; /*绝对定位*/
left:10px; /*位置信息*/
top:90px;
width:72px;
height:130px;
border:solid 1px gray; /*边框样式*/
background-color:#eee; /*背景色*/
font-size:12px; /*文字大小*/
cursor:pointer; /*鼠标图标*/
}
(2)事件处理
首先，本例中需要为广告图片添加鼠标单击事件，选中图片后跳转到广告页面，也可以通过为图片添加超链接进行跳转。
其次，需要为“关闭”文字添加鼠标单击事件，单击“关闭”后隐藏并销毁广告对象，如果仅仅隐藏广告，广告对象在浏览器的DOM结构中仍然存在，会消耗浏览器的资源，所以关闭后通过清空层中内容的方式删除广告对象。
最后，需要为窗体添加滚动条滚动事件（onscroll），在滚动条滚动时通知程序改变广告的位置，保证广告始终出现在用户的视野内。
(3)主要技术
滚动条滚动事件是比较特殊的事件，需要通过JavaScript代码进行添加，因为要监听的是窗体滚动条事件，所以应对window对象添加onscroll事件，如下所示：
\u2028 window.onscroll = function () {\u2028 //事件处理代码\u2028 }
为了让广告保持在页面可视范围内的固定位置，广告的纵坐标应该为：广告距离页面上端的相对距离 + 垂直滚动条滚动距离，可以通过document.body的scrollTop属性获取垂直滚动条的滚动距离（也可以通过scrollLeft属性获取水平滚动条的滚动距离，但本例不考虑水平滚动条移动的情况），如下所示：
\u2028 广告图片的垂直坐标 = 90（广告距离页面顶端的相对像素）+ document.body.scrollTop;
如果拖动移动垂直滚动条后，直接将广告移动到新的位置，视觉效果会不自然，所以本例设计为广告图片速度由快至慢逐渐移动到新的位置，具有良好的动态视觉效果。为了实现这一效果，需要将广告由当前位置逐渐移动到新位置，可以通过广告对象的offsetTop属性获取广告的当前垂直位置，在通过window对象的setTimeout方法定时进行移动，为实现由快到慢的移动效果，每次移动纵坐标距离差的1/5。
(4).特殊处理
当用户拖动垂直滚动条时，如果上一次的移动效果还未完成，需要终止上一次的移动，从当前的位置开发新的移动效果，否则会出现用户连续拖动垂直滚动条后广告图片抖动的不良视觉效果。
案例：跟随滚动条移动的广告
4.漂浮广告
虽然跟随滚动条移动的广告可以持续出现在用户的视野内，但相对于静止不动的物体，人类的视觉系统会更加关注运动中的物体，于是很多网站为了提升广告受关注的程度，提高点击率，会采用漂浮广告这种形式。在用户浏览网页的过程中，漂浮广告会按照某一路径进行运动，以增加用户对它的关注。虽然漂浮广告能够吸引用户的注意力，但从一定程度上会影响用户对网页内容的正常浏览，故同一个页面上的漂浮广告最好不要超过两个。
下面分析在页面中实现固定位置广告的思路。
漂浮广告的制作建立在跟随滚动条移动的广告基础上，广告的设计方式、确保广告出现在网页视野内容的设计与上例基本相同。
(1)事件处理
除了监听广告图片的单击事件、“关闭”文本的单击事件和窗体的滚动事件外，我们还希望当用户将鼠标移动到广告上时，广告能够暂停移动，方便用户单击广告，当鼠标移开时，广告能够继续移动，故需要监听广告的鼠标移入事件与鼠标移出事件。
(2)主要技术
本例的重点在于保证广告始终在页面的范围内移动，不能移出当前页面的显示范围，故需要对广告的移动位置进行限制，限制范围如下：
0 < 广告的水平坐标 < 页面可视范围宽度 - 广告宽度
垂直滚动条位置 < 广告的垂直坐标 < 垂直滚动条位置 + 页面可视范围高度 - 广告高度
当广告的坐标超过限制水平或垂直范围后，应该令广告向相反的方向水平或垂直方向移动。
注意：本例中不考虑水平滚动条移动的问题
可以通过document.body对象的offsetWidth属性得到页面可视范围宽度，通过offsetHeight属性得到页面可视范围高度。
(3)特殊处理
当用户选择管理广告时，除了隐藏、销毁广告外，需要同时停止广告的移动，否则程序会进行无意义的广告移动处理。
案例：漂浮广告
京公网安备 11010502036488号