滑动门的原理
滑动门听上去很专业很难理解，我在明白它的原理前也是一看到就头晕，能避则避，但是有一天在csdn上看到一篇介绍滑动门的文章，看完后豁然开朗，下面就文章的内容结合自己的理解来阐述一下滑动门的原理。
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> CODE.JS.CN </title>
5 <style>
6 body{font:12px Arial, Helvetica, sans-serif;}
7 #menu ul{margin:0px;padding:0px;list-style:none; }
8 #menu li{float:left;}
9 #menu a{display:block;padding-left:4px; background:url(2072.gif) no-repeat left top;}
10 #menu span{background:url(2073.gif) no-repeat right top;padding:10px 20px 10px 16px;display:block;}
11 #menu a:hover{background:url(2072.gif) no-repeat left -42px;color:#fff;}
12 #menu a:hover span{background:url(2073.gif) no-repeat right -42px;}
13 </style>
14 </head>
15 <body>
16 <div id="menu">
17 <ul>
18 <li><a href="#" ><span>Home</span></a></li>
19 <li><a href="#" ><span>News</span></a></li>
20 <li><a href="#" ><span>Downloads</span></a></li>
21 <li><a href="#" ><span>Services</span></a></li>
22 <li><a href="#" ><span>Support</span></a></li>
23 <li><a href="#" ><span>About</span></a></li>
24 </ul>
25 </div>
26 </body>
27 </html>
28
29
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> CODE.JS.CN </title>
5 <style>
6 body{font:12px Arial, Helvetica, sans-serif;}
7 #menu ul{margin:0px;padding:0px;list-style:none; }
8 #menu li{float:left;}
9 #menu a{display:block;padding-left:4px; background:url(2072.gif) no-repeat left top;}
10 #menu span{background:url(2073.gif) no-repeat right top;padding:10px 20px 10px 16px;display:block;}
11 #menu a:hover{background:url(2072.gif) no-repeat left -42px;color:#fff;}
12 #menu a:hover span{background:url(2073.gif) no-repeat right -42px;}
13 </style>
14 </head>
15 <body>
16 <div id="menu">
17 <ul>
18 <li><a href="#" ><span>Home</span></a></li>
19 <li><a href="#" ><span>News</span></a></li>
20 <li><a href="#" ><span>Downloads</span></a></li>
21 <li><a href="#" ><span>Services</span></a></li>
22 <li><a href="#" ><span>Support</span></a></li>
23 <li><a href="#" ><span>About</span></a></li>
24 </ul>
25 </div>
26 </body>
27 </html>
28
29
ul: 有默认值，所以要格式化一下：margin:0px;padding:0px;list-style:none；
li: 默认是纵向排列，在手册上查不到li的默认设置，但我觉得li应该是个块元素。所以要设置float:left，使之横向排列；
a: 是行内元素，对a设置宽度、高度是无效，所以要把a元素先设置成块级元素：display:block；设置背景为2072.gif，从左上开始显示：background:url(2072.gif) no-repeat left top；设置padding-left：4px，这4个像素是2072.gif图片的宽度，这是为了让a元素内的span元素在a元素里距离左边4个像素后开始显示，这个就是滑动门原理的一个重要步骤；
span：是行内元素；我们用span元素是为了让它加载背景2073.gif，让背景从右上显示，和a元素的背景拼成我们需要的完整的效果；所以要先设置display:block，使span可以变宽变窄，由于span在a中，当span宽度、高度有变化的时候，a元素也会被span元素撑大缩小。
a:hover：鼠标移到a元素上背景变为从2072.gif的top从 -42个像素开始显示；
a span:hover：鼠标移到a元素上背景变为从2073.gif的top从 -42个像素开始显示；
(2072.gif) 
(2073.gif)
