html7清除浮动补充案例,网页设计基础 javascript事件处理 第9章 JavaScript事件处理-补充案例.doc...

第8章 JavaScript编程基础

PAGE 34

PAGE 1

补充案例

【案例9-1】 关闭广告栏

案例描述

考核知识点

鼠标点击事件

练习目标

掌握鼠标点击事件的应用。

掌握JavaScript对元素样式的操作。

需求分析

在浏览网页时，页面中经常会出现一些广告栏，点击广告栏上的关闭按钮即可关闭广告栏，本案例将通过JavaScript中的鼠标点击事件，完成这一效果。如图9-1所示。

案例分析

效果如图9-1所示。

广告栏效果展示

具体实现步骤如下：

图9-1所示的广告栏通过

标记定义，关闭按钮通过标记定义。

定义大盒子的宽高、外边距及背景图片。

通过鼠标点击事件关闭图片。

二、案例实现

根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下所示。

/p>

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

关闭广告栏

div{

width:120px;

height:271px;

margin:100px auto;

background: url(images/ad.png) no-repeat;

}

window.οnlοad=function(){

var B=document.getElementById("bj"); //获取事件源

var C=document.getElementById("gb"); //被关闭的盒子

C.οnclick=function(){ //鼠标点击事件

B.style.display="none"; //盒子被影藏

}

}

运行代码，效果如图9-2所示。

关闭广告栏

当点击左上角的关闭按钮时，广告栏隐藏。

【案例9-2】 传智宣传栏切换

案例描述

考核知识点

for循环

练习目标

掌握鼠标移入和移出事件的应用。

掌握for循环的使用。

需求分析

图片切换效果已经成为网页制作的潮流，这样可以给浏览者清晰明了的感觉，本案例将通过引入JavaScript中for循环遍历元素的方法模仿传智宣传栏切换效果。

案例分析

效果如图9-3所示。

图片切换效果展示

具体实现步骤如下：

图片通过

标记定义，右侧文字通过无序列表

• 定义。外部嵌套的大盒子由

标记定义。

设置大盒子的宽高、外边距和边框样式。

定义左侧盒子的宽高并使其左浮动。

设置第一张图片为显示，其他图片为隐藏。

定义右侧的盒子左浮动。

定义

宽高、背景颜色、外边框及文字样式。

定义选中状态的

背景颜色及文字颜色。

通过for循环遍历图片和文字。

当鼠标移入时切换图片并修改文字样式。

二、案例实现

新建HTML页面，具体代码如下：

/p>

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

传智宣传栏切换