第8章 JavaScript编程基础-补充案例

9

博学谷——让IT教学更简单，让IT学习更有效

二、案例实现

1、制作页面结构

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

1

5 淘宝商品展示 7 8 9 10 11 12 13 14 15 16 17

18 19

2、定义CSS样式

对应的CSS样式代码如下：

1 *{margin:0;padding:0;} 2 ul{list-style: none;} 3 #box 4 { 5 6 7 8 9 10 11 }

12 #box ul li{ 13 14 15 }

float: left; cursor: pointer; width:360px; height: 70px;

border:1px solid #ccc; margin:100px auto; padding-top: 360px;

background: url(images/01big.jpg) 0 0 no-repeat;

保存后，在火狐浏览器中预览，效果如图8-11所示。

10

博学谷——让IT教学更简单，让IT学习更有效

图8-11 CSS效果展示

3、添加JavaScript效果

添加JavaScript效果，具体代码如下：

1 window.onload=function(){ 2 3 4 5 6 7 8 9

var BOSS=document.getElementById(\获取box 更换背景图片用的 function fun(lili,address) //封装函数 {

var pic=document.getElementById(lili); //获取li事件源

pic.onmouseover=function(){

BOSS.style.background=address; //更换背景 }

} // 函数自己不执行 除非被调用

10 //函数调用

11 fun(\ 12 fun(\ 13 fun(\ 14 fun(\ 15 fun(\ 16 }

刷新页面，鼠标移动到第二个小图标时，效果如图8-12所示。

11

博学谷——让IT教学更简单，让IT学习更有效

图8-12 切换效果展示

【案例8-6】下拉菜单更换皮肤 一、案例描述

1、 考核知识点

switch语句

2、 练习目标

? 掌握switch语句。

? 能够准确修改元素样式。

3、 需求分析

随着互联网技术的不断进步，网页已经不仅仅局限于向用户传达信息，更专注于用户体验，例如，通过“更换皮肤”，“改变字号”等，来增加页面的友好程度。本案例将通过条件语句中的switch语句来实现网页的换肤功能。

4、 案例分析

1) 效果如图8-13所示。

12