制作banner切换效果

  这边首先上图：

  

、

  要制作上面的切换banner效果，可以使用background-position加padding来实现，挺有意思的css2的功能，这阶段在制作手机版的帮助系统以及专题大量用到，当然是参考了很多其他的插件来完成，先上css样式：

/* Used for the Switch effect: */
.cb-enable, .cb-disable, .cb-enable span, .cb-disable span { background: url(../images/switch.gif) repeat-x; display: block; float: left; }
.cb-enable span, .cb-disable span { line-height: 30px; display: block; background-repeat: no-repeat; font-weight: bold; }
.cb-enable span { background-position: left -90px; padding: 0 2px; }
.cb-disable span { background-position: right -180px;padding: 0 2px; }

.cb-disable.selected { background-position: 0px -60px; }

.cb-disable.selected span { background-position: right -240px; color: #fff; }

.cb-enable.selected { background-position: 0 -60px; }
.cb-enable.selected span { background-position: left -150px; color: #fff; }
.switch label { cursor: pointer; }

这种选择器的做法可以制作出切换效果出来，html脚本如下：

<div class="header">

<p class="field switch">

<label id="problem" for="radio1" class="cb-enable selected" style="width:50%"><span style="width:100%">常见问题</span></label>
<label id="description" for="radio2" class="cb-disable" style="width:50%"><span style="width:100%">问题描述</span></label>

</p>
</div>

这里面的span一定要设置为style 为width：100%，否则只贴一小块，而上面的selected选择器都要从right开始否则不会从图片截取出来贴有边框，当然padding也是必不可少的，因为有重合，如果padding没有的话，常见问题和问题描述都会重叠到左边框上，看上去很难看。