【CSS翻转门】技术实例讲解（附源码下载）

<div class="floatRPic">
<img alt="翻转门" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2007/home.gif"><br>图1:翻转门的秘密</div>
<span>图片等资源来源网络，如果侵犯了您的权利，请告知。谢谢！</span><br><h4>翻转门的优缺点以及实现</h4>
<p><span style="color: #ff0000;">优点：</span>1：普通的背景图片和鼠标浮上去的背景图片是同一张图片。所以只需要下载一次就可以了。减少了一个http的request请求，所以对页面的效率提高有很大的好处（《如何提高网页的效率》两篇文章被it168编辑采用了，要等2周以后才能放出。抱歉。）。<br>
2：因为采用的是同一张图片，所以看到的时候就肯定已经下载到本地了。所以当鼠标浮上去的时候，变换非常的快（因为是本地的），所以不会出现那种“鼠标浮上去以后好久才能看到替换图片”的情况。</p>
<p><span style="color: #ff0000;">缺点：</span><br>1：同一张图片，随意如果要改变的话，需要重新制作图片。维护成本比较高（不过，如果有美工在的话，自然不成问题）。<br>
2：有时候需要“算像素”以便显示的正好。</p>
<p>
<span style="color: #ff0000;">实现：</span><br>看图1。分别是普通状态下和鼠标浮上去后要显示的样子。我们只要普通的时候显示上面一般，鼠标浮上去的时候显示下面一半，就可以达到想要的效果了。有了这个思想，实现起来就很简单了。一个容器标签，高设定为要变换图片（如图1）的一半大小，宽设定为和变换图片相等。然后将此容器的背景图片设为变换图片。普通的时候显示top部分。然后鼠标浮上去的时候利用css样式的伪类:hover再将背景图片显示bottom部分即可。</p>

<div class="floatMPic">
<img alt="翻转门实例" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2007/menu-sample.jpg"><br>图2:翻转门实例截图（点击下发按钮下载翻转门实例完整源码）<br><img src="http://images.cnblogs.com/cnblogs_com/justinyoung/2007/broadcast.gif" alt="翻转门实例下载"><a href="http://files.cnblogs.com/JustinYoung/css-menu.zip" title="翻转门实例下载"><img src="http://images.cnblogs.com/cnblogs_com/justinyoung/common/000download.gif" alt="翻转门实例下载"></a>
</div>
<p>
为了便于理解和讲解，下面将通过一个实例来讲解。上面是此例的截图和下载地址。建议将将Demo下载到本地，以便更好的研究其代码。<br>
前台XHTML代码很简单，只是一个无序列表而已。</p>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #0000ff;">&lt;!</span><span style="color: #ff00ff;">DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">html</span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta</span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;">content</span><span style="color: #0000ff;">="text/html;charset=UTF-8"</span><span style="color: #ff0000;"></span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;">UntitledDocument</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">link</span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="style.css"</span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"></span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ul</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="menu"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">a</span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="home"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;">Home</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">a</span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="about"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;">About</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">a</span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="rss"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;">RSS</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span>
</div>
<p>
关键是在CSS文件里面，下面以“Home”这个菜单为例，看看是如何实现的。下面是“Home”菜单翻转实现的关键代码：</p>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #008000;">/*</span><span style="color: #008000;">普通状态下css样式</span><span style="color: #008000;">*/</span><span style="color: #800000;"><br>
#menu.home</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
width</span><span style="color: #000000;">:</span><span style="color: #0000ff;">144px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
height</span><span style="color: #000000;">:</span><span style="color: #0000ff;">58px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
background</span><span style="color: #000000;">:</span><span style="color: #0000ff;">url(images/home.gif)no-repeat</span><span style="color: #000000;">;</span><span style="color: #008000;">/*</span><span style="color: #008000;">后面没有设置x和y值的话，默认是lefttop</span><span style="color: #008000;">*/</span><span style="color: #ff0000;"><br>
left</span><span style="color: #000000;">:</span><span style="color: #0000ff;">96px</span><span style="color: #000000;">;</span><span style="color: #008000;">/*</span><span style="color: #008000;">left和top的设置是为了定位需要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;"><br>
top</span><span style="color: #000000;">:</span><span style="color: #0000ff;">73px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span>
</div>
<p>
下面这个css样式是最核心的一句代码。通过伪类:hover将图片“翻转”：</p>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">#menua:hover</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
background-position</span><span style="color: #000000;">:</span><span style="color: #0000ff;">leftbottom</span><span style="color: #000000;">;</span><span style="color: #008000;">/*</span><span style="color: #008000;">通过a的伪类:hover，当鼠标浮上去的时候将背景图片从下面(bottom)开始显示，因为“#menu.home”中已经设定了固定的高度，所以这里只会显示图片下部58px高度的内容</span><span style="color: #008000;">*/</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span>
</div>
<p>就这样一个简单的翻转门菜单就实现了。而且因为是通过“#menu a:hover”设置的样式，所以对menu菜单下的所有a都适应，后面不同的栏目，只要通过形如“#menu .home”这样的分别设置就可以了。当然，所有的背景变换图片都要是一样大小，而且上下的图像应该是通过中间水平线“对折”的。
</p>
<div class="floatRPic">
<img alt="翻转门" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2007/home-over.gif"><br>图3:菜单的说明</div>
有得朋友可能会问，＜li＞里面的＜a＞，再里面的＜span＞是做什么用的，其实，这个和“翻转门”倒是没有什么关系，只是装饰用的，是用来显示菜单说明图片用的，例如“home”菜单上的“go to home”（如图3所示）

<h4>再说几句废话</h4>
<p></p>
<div class="floatLPic">
<a href="http://space.cnblogs.com/group/w3c/" title="css样式表"><img src="http://space.cnblogs.com/pic/group/g100025.jpg" alt="博客园的朋友请点击此处"></a><br>图4:web标准设计</div>很多的朋友已经感到web标准设计的重要性，也对此很感兴趣，想要学习。但是很多的站在“web标准设计”门口的朋友都感觉很迷茫和混乱。感觉这些东西特别“烦”、特别“乱”。的确，因为没有统一的标准，firefox和M$的IE也都有对页面各自的解析方式，所以导致整个局面十分混乱。因此也造成了学习者“烦”和“乱”的感觉。这种感觉在现阶段可能还无法得到彻底的解决，但是我们很欣慰的看到IE7对web标准的支持已经迈出了很大的一步。相信在不久的将来，web标准设计将会更加的普及。
<br><hr align="left" width="80%">
tag:<span style="font-size: 80%; color: #666;">css翻转门,css翻转门实例,css翻转门技术,css中的翻转门技术,图片翻转,css样式表,web标准设计,css样式表代码,css样式表实例</span>