当前是第一章的内容。

12.2.2缩放菜单

缩放菜单也是一种常见的菜单形式，本例将要实现一个简单的缩放菜单，如图12-6。

图12-6缩放菜单

实现本例的思路是点击主菜单项后，能够使其对应的子菜单收起或展开。

本例的关键点是：

一、子菜单缩放效果的实现；二、点击主菜单项，如何获取其相对应的子菜单。

我们学习CSS属性的时候接触过可以使网页元素隐藏的属性，如“display”和“visibility”，在这里要使用“display”属性来实现菜单的缩放效果，因为“display”属性和“visibility”属性都可以实现元素的隐藏效果，但是“visibility”属性值为“hidden”时，尽管元素不可见，但是元素所在的区域依然保留。

对于本例如果使用“visibility”属性实现，那么点击“音乐”菜单项后呈现的效果将如图12-7所示，这显然不是缩放菜单的效果，因此要使用“display”属性控制菜单项的缩放。

图12-7使用visibility控制菜单项的显示隐藏

对于第二个关键点，解决的办法也有很多，本例中的办法是将一组子菜单项放置在一个

流行

爵士

ToggleMenu（'sub2'）">电影

喜剧片

战争片

12.2.3下拉菜单

下拉菜单是更为常用的菜单形式，有了前面实现缩放菜单的基础，实现下拉菜单的也就容易了很多。

主要就是将主菜单的点击事件更换为鼠标事件来控制子菜单的显示与隐藏，我们在例12-6的基础上修改成为下拉菜单，运行结果如图12-8。

例12-7下拉菜单

.menu1{float:

left;}

.mc,.sc1a,.sc2a{

text-align:

center;

display:

block;

width:

80px;

text-decoration:

none;

padding:

2px0px2px10px;

background:

#F90;

color:

#000;

border:

1pxsolid#eee;

}

.sc1a,.sc2a{

background:

#FC6;

}

.sc1a:

hover,.sc2a:

hover{

background:

#EEE;/*鼠标移入菜单项，变换菜单项的背景色*/

}

#sub1,#sub2{display:

none;}

--

functionToggleMenu（cls,val）{

document.getElementById（cls）.style.display=val;

}

-->

音乐

古典

流行

爵士

电影

喜剧片

战争片

图12-8下拉菜单

12.2.4可放大的图片缩略图

图片缩略图是较为常用的图片展示形式。

本例将要实现的效果是在网页上首先排列展示图片的缩略图，当鼠标放到某个图片的缩略图上，会显示相应图片的放大效果。

我们分析实现该例的关键点，实际上与我们前面介绍的下拉菜单的实现有些类似，将每个图片的实际效果图做为一个隐藏的元素，然后将缩略图绑定鼠标移入移出事件以控制实际效果图是否显示。

但是对于本例，我们可以仅使用伪类来实现，而不必使用JavaScript函数。

我们知道对于元素，伪类“:

hover”能够区别鼠标移入移出两种状态，因此我们可以使用“:

hover”定义两种图片的缩略图的样式。

那么缩略图的样式如何影响到实际效果图的显示与隐藏呢？

那显然可以将实际效果图作为缩略图的子元素。

然后使用包含选择符定义实际效果图的显示与隐藏。

用文字描述就是：

缩略图实际效果图｛隐藏｝

缩略图:

hover实际效果图｛显示｝

根据上述实现思路，该例代码如例12-8。

例12-8图像缩略图

--

.thumbnail{

position:

relative;

text-decoration:

none;

z-index:

0;

}

.thumbnail:

hover{

background:

#FAA;

z-index:

1;

}

.thumbnaildiv{

position:

absolute;

background:

#AAA;

padding:

5px;

visibility:

hidden;

}

.thumbnaildivimg{

border-width:

0;

padding:

2px;

}

.thumbnail:

hoverdiv{

visibility:

visible;

top:

0;

left:

40px;

}

-->

图12-9可放大的图像缩略图

当然我们还可以在此效果基础上进一步美化、完善，比如在实际效果图所在元素内添加图片的说明文字等。

本例仅就实现方法介绍到这里。

本章小结

本章先介绍了几个小技巧用于解决部分CSS属性在IE浏览器和FF浏览器下显示不一致的问题，接着介绍了几个简单的运用CSS技术实现特效的例子。

当前，实际上我们在浏览网页的时候经常接触到的更为特别的效果，比如元素能够拖动以改变页面布局、进度条控件效果、即时输入提示等等，更多要借助到JavaScript语言、XMLHttpRequest对象来实现。

前面我们介绍过，我们将这几种技术综合称为Ajax技术。

因此，我们说学习CSS技术是基础，要提升到更高的一个层次就难免要面对多种技术的结合使用，即学习掌握Ajax技术。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

第12章 CSS实例 12 CSS 实例

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。