製作banner切換效果
阿新 • • 發佈：2019-01-26
這邊首先上圖：
要製作上面的切換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沒有的話，常見問題和問題描述都會重疊到左邊框上，看上去很難看。