滑动门的原理
滑动门听上去很专业很难理解,我在明白它的原理前也是一看到就头晕,能避则避,但是有一天在csdn上看到一篇介绍滑动门的文章,看完后豁然开朗,下面就文章的内容结合自己的理解来阐述一下滑动门的原理。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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)