当前位置: css > DIV+CSS 教程 >

DIV+CSS教程:理解掌握Z-index属性(3)

时间:2010-02-03 22:36来源:CSS中国 作者:秩名 点击:
CSS 气泡: Z-index 属性还可以用来实现基于CSS的提示气泡,就像下面 trentrichardson.com 展示的那样 Light Box: 如果不是因为应用了z-index 属性,现在也不会有那

CSS 气泡:

Z-index 属性还可以用来实现基于CSS的提示气泡,就像下面trentrichardson.com展示的那样

Light Box:

如果不是因为应用了z-index 属性,现在也不会有那么多的品质优秀的Light Box脚本可以免费使用,比如说JQuery的一个插件FancyBox。

Light box 脚本使用半透明的PNG图片来使背景变暗,之后拿来一个新的元素,经常会使用类似窗口的DIV,将之放置在前排。覆盖住屏幕的PNG和之后的DIV都使用Z-index 属性以确保这2个元素会位于页面其他元素之上。

下拉菜单:

类似于Brainjar’s classic Revenge of the Menu Bar的下拉菜单使用Z-index以确保菜单的按钮和他们的下拉项位于层叠的顶部。

画廊效果的图片展示:

将JQuery animation和Z-index组合可以创造出幻灯片或画廊式的卓越效果。usejquery.com 网站中的这个demo向我们展示了这两者的绝妙组合带给我们的惊喜。

Polaroid Photo Gallery by Chris Spooner 采用功能更为强大的CSS3同Z-index配合,创造出了一个当鼠标划过时会重新码放的超cool效果。

Fancy Thumbnail Hover Effect 中Soh Tanaka 使用Query为基础的脚本改变z-index的赋值。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名:密码: 验证码:点击我更换图片
推荐内容
相关内容