【CSS翻转门】技术实例讲解(附源码下载)
![翻转门](https://www.cnblogs.com/images/cnblogs_com/justinyoung/2007/home.gif)
图1:翻转门的秘密
翻转门的优缺点以及实现
优点:
1:普通的背景图片和鼠标浮上去的背景图片是同一张图片。所以只需要下载一次就可以了。减少了一个http的request请求,所以对页面的效率提高有很大的好处(《如何提高网页的效率》两篇文章被it168编辑采用了,要等2周以后才能放出。抱歉。)。
2:因为采用的是同一张图片,所以看到的时候就肯定已经下载到本地了。所以当鼠标浮上去的时候,变换非常的快(因为是本地的),所以不会出现那种“鼠标浮上去以后好久才能看到替换图片”的情况。
缺点:
1:同一张图片,随意如果要改变的话,需要重新制作图片。维护成本比较高(不过,如果有美工在的话,自然不成问题)。
2:有时候需要“算像素”以便显示的正好。
实现:
看图1。分别是普通状态下和鼠标浮上去后要显示的样子。我们只要普通的时候显示上面一般,鼠标浮上去的时候显示下面一半,就可以达到想要的效果了。有了这个思想,实现起来就很简单了。一个容器标签,高设定为要变换图片(如图1)的一半大小,宽设定为和变换图片相等。然后将此容器的背景图片设为变换图片。普通的时候显示top部分。然后鼠标浮上去的时候利用css样式的伪类:hover再将背景图片显示bottom部分即可。
为了便于理解和讲解,下面将通过一个实例来讲解。上面是此例的截图和下载地址。建议将将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”这样的分别设置就可以了。当然,所有的背景变换图片都要是一样大小,而且上下的图像应该是通过中间水平线“对折”的。
![翻转门](https://www.cnblogs.com/images/cnblogs_com/justinyoung/2007/home-over.gif)
图3:菜单的说明
再说几句废话
很多的朋友已经感到web标准设计的重要性,也对此很感兴趣,想要学习。但是很多的站在“web标准设计”门口的朋友都感觉很迷茫和混乱。感觉这些东西特别“烦”、特别“乱”。的确,因为没有统一的标准,firefox和M$的IE也都有对页面各自的解析方式,所以导致整个局面十分混乱。因此也造成了学习者“烦”和“乱”的感觉。这种感觉在现阶段可能还无法得到彻底的解决,但是我们很欣慰的看到IE7对web标准的支持已经迈出了很大的一步。相信在不久的将来,web标准设计将会更加的普及。tag:css翻转门,css翻转门实例,css翻转门技术,css中的翻转门技术,图片翻转,css样式表,web标准设计,css样式表代码,css样式表实例