【CSS翻转门】技术实例讲解（附源码下载）
图1:翻转门的秘密
翻转门的优缺点以及实现
优点：
1：普通的背景图片和鼠标浮上去的背景图片是同一张图片。所以只需要下载一次就可以了。减少了一个http的request请求，所以对页面的效率提高有很大的好处（《如何提高网页的效率》两篇文章被it168编辑采用了，要等2周以后才能放出。抱歉。）。
2：因为采用的是同一张图片，所以看到的时候就肯定已经下载到本地了。所以当鼠标浮上去的时候，变换非常的快（因为是本地的），所以不会出现那种“鼠标浮上去以后好久才能看到替换图片”的情况。
缺点：
1：同一张图片，随意如果要改变的话，需要重新制作图片。维护成本比较高（不过，如果有美工在的话，自然不成问题）。
2：有时候需要“算像素”以便显示的正好。
实现：
看图1。分别是普通状态下和鼠标浮上去后要显示的样子。我们只要普通的时候显示上面一般，鼠标浮上去的时候显示下面一半，就可以达到想要的效果了。有了这个思想，实现起来就很简单了。一个容器标签，高设定为要变换图片（如图1）的一半大小，宽设定为和变换图片相等。然后将此容器的背景图片设为变换图片。普通的时候显示top部分。然后鼠标浮上去的时候利用css样式的伪类:hover再将背景图片显示bottom部分即可。
图2:翻转门实例截图（点击下发按钮下载翻转门实例完整源码）
为了便于理解和讲解，下面将通过一个实例来讲解。上面是此例的截图和下载地址。建议将将Demo下载到本地，以便更好的研究其代码。
前台XHTML代码很简单，只是一个无序列表而已。
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< title > Untitled Document </ title >
< link href ="style.css" rel ="stylesheet" type ="text/css" />
</ head >
< body >
< ul id ="menu" >
< li >< a href ="#" class ="home" > Home < span ></ span ></ a ></ li >
< li >< a href ="#" class ="about" > About < span ></ span ></ a ></ li >
< li >< a href ="#" class ="rss" > RSS < span ></ span ></ a ></ li >
</ ul >
</ body >
</ html >
关键是在CSS文件里面，下面以“Home”这个菜单为例，看看是如何实现的。下面是“Home”菜单翻转实现的关键代码：
#menu .home {
width : 144px ;
height : 58px ;
background : url(images/home.gif) no-repeat ; /* 后面没有设置x和y值的话，默认是left top */
left : 96px ; /* left和top的设置是为了定位需要 */
top : 73px ;
}
下面这个css样式是最核心的一句代码。通过伪类:hover将图片“翻转”：
background-position : left bottom ; /* 通过a的伪类:hover，当鼠标浮上去的时候将背景图片从下面(bottom)开始显示，因为“#menu .home”中已经设定了固定的高度，所以这里只会显示图片下部58px高度的内容 */
}
就这样一个简单的翻转门菜单就实现了。而且因为是通过“#menu a:hover”设置的样式，所以对menu菜单下的所有a都适应，后面不同的栏目，只要通过形如“#menu .home”这样的分别设置就可以了。当然，所有的背景变换图片都要是一样大小，而且上下的图像应该是通过中间水平线“对折”的。
图3:菜单的说明
再说几句废话
图4:web标准设计
tag: css翻转门,css翻转门实例,css翻转门技术,css中的翻转门技术,图片翻转,css样式表,web标准设计,css样式表代码,css样式表实例