怎样实现“给下拉菜单换肤”？

假

期

快

乐

计算机专业的老师都知道，网页已经不仅仅局限于向用户传达信息，更加专注于用户体验，例如，通过“更换皮肤”，“改变字号”等，来增加页面的友好程度。

本案例将通过条件语句中的switch语句来实现网页的换肤功能。

非常简单，一学就会！

我们要实现的案例效果如下图所示：

换肤前显示图片为“春意盎然

点击下拉菜单中的“夏日炎炎”，效果如下图所示：

换肤后显示图片为“夏日炎炎”

这个案例是怎样实现的呢？

很简单，一共分3步：

a)通过标记定义下拉菜单；

b)为body添加背景图片；

c)获取下拉菜单，通过switch语句改变背景颜色；

案例实现代码如下：

1、制作页面结构

新建HTML页面，主要代码如下：

春意绵绵

夏日炎炎

秋风瑟瑟

冬雪皑皑

2、定义CSS样式

对应的CSS样式代码如下：

body

保存后，在火狐浏览器中预览，效果如下图所示：

加入 CSS效果展示

3、添加JavaScript效果

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

window.onload=function(){

varsele=document.getElementById("sele");//获取下拉菜单

sele.onchange=function(){

switch(this.value)

{ case "春意绵绵":

document.body.style.background="url(images/chun1.jpg)";

break;

case "2":

document.body.style.background="url(images/xia1.jpg)";

break;

case "3":

document.body.style.background="url(images/qiu1.jpg)";

break;

case "4":

document.body.style.background="url(images/dong1.jpg)";

break; }}}

刷新页面，选择下拉菜单中的季节，背景图片会发生相应的变化。

至此，下拉菜单换肤效果就完成了，是不是很简单？赶紧动手尝试一下吧！

需要源码的老师，找大牛来领取哦~

往期案例：

大牛说 怎样用HTML5制作刮刮卡（教学案例）