有关“滑动门”代码研究

标签：

废话先不说，先上代码：

/****************************************
此代码来源于CSS-TRICKS，以下信息为博主发布：
CREATED BY: Brandon Setter
WEBSITE: http://Media-Sprout.com
FOLLOW ME: twitter.com/bsetter
CREATION DATE: 10/2009
VERSION 1.0
*****************************************/

首先是HTML代码：

1 <div class="clearbutton">
2     <a class="GlobalOrangeButton" href="#">
3         <span>So Neat!</span>
4     </a>
5 </div>

然后是CSS代码：

 1 /* GLOBAL ORANGE BUTTON *****************************/
 2 a.GlobalOrangeButton span {
 3 background: transparent url(‘images/button_left_orange.png‘) no-repeat 0 0;
 4 display: block;
 5 line-height: 22px;
 6 padding: 7px 0 5px 18px;
 7 color: #fff;
 8 }
 9 
10 a.GlobalOrangeButton {
11 background: transparent url(‘images/button_right_orange.png‘) no-repeat top
12
13 right;
14 display: block;
15 float: left;
16 height: 34px;
17 margin-right: 6px;
18 padding-right: 20px;
19 text-decoration: none;
20 font-family: Arial, Helvetica, sans-serif;
21 font-size:12px;
22 font-weight:bold;
23 }
24 
25 a.GlobalOrangeButton:hover span {
26 background-position: 0 -34px; color: #fff;
27 }
28 
29 a.GlobalOrangeButton:hover {
30 background-position: right -34px;
31 }

长型left

短型right

“滑动门”原理

　　其实我们所称“滑动门”是一种用于制作图片按钮的技术，可以通过纯CSS实现。

　　应用一张长型left图片及一张短型right图片，长型left图片居于元素背景的左侧，短型right图片居于另一元素的右侧，文字位于短型right图片元素内。如此，当文字增加时，会使所在元素的width变长，即产生向右移动，就像滑动。长型left图片多余部分位于短型right图片之下，并由于超出最外层box element的width导致overflow，即被隐藏，当短型right图片滑动时，被隐藏的部分便展现出来。

　　源码块中加粗及有下划线部分是笔者认为最为重要的部分，其他只是对样式的补充。

源码分析

　　background部分就不赘述了，有基础的读者应该很容易就看懂了。这里需要提到的是，长型left图片应用在了<span>元素上，短型right图片则应用在了<a>元素上，为什么这样做呢？个人认为，这样在扩展时，<a>元素的热点区域也得到了扩展。这样，当内容扩展了之后，整个按钮依然是可点击的，而无盲区。

　　这里，<span><a>两个元素都被设置为display:block;这样，可以比较自由地调整元素的宽度及高度，以完整地展示出作为背景的按钮。同时，应该来说，也使得float得到了应用。

　　其他部分的代码无非是调整了整个元素的宽度及高度以及字体等样式，再就是涉及到hover样式的变幻。

　　其实，总的说来，CSS-TRICKS所展示出来的有关滑动门，其实也有关于CSS Sprite的代码是比较简单的，没有太多复杂的成分。说起来，这应该是我们这些编码者所需要努力做到。

有关“滑动门”代码研究

标签：

原文地址：http://www.cnblogs.com/orange-ven/p/4657309.html