CSS 切割圖片 - 計數器 效果

css 切圖 切割



.

使用 css background 內的 url 來調用圖片，比用 htm img 標籤更有效率，同一張圖使用數次，只會向網站抓一次get值，

這裡要簡易來解說 css 使用 background 做切割圖片效果，就是取得圖片中需要的部份。

background 指令參數說明：
background:背景色 圖片位置 是否重覆或固定 x軸 y軸

overflow:hidden 似乎沒加也行，不過看很多人都加這串，順便也加入，超出隱藏的意思

隨便找了一個中文 0 ~ 九 的一張圖，後使用下述代碼：

<div style="height:9px; width:9px; margin:0; padding:0; background:#ffffff url(zcounter2.gif) no-repeat -0px 0; overflow:hidden;"></div>
<div style="height:9px; width:9px; margin:0; padding:0; background:#ffffff url(zcounter2.gif) no-repeat -9px 0; overflow:hidden;"></div>
<div style="height:9px; width:9px; margin:0; padding:0; background:#ffffff url(zcounter2.gif) no-repeat -18px 0; overflow:hidden;"></div>
<div style="height:9px; width:9px; margin:0; padding:0; background:#ffffff url(zcounter2.gif) no-repeat -27px 0; overflow:hidden;"></div>
<div style="height:9px; width:9px; margin:0; padding:0; background:#ffffff url(zcounter2.gif) no-repeat -36px 0; overflow:hidden;"></div>
<div style="height:9px; width:9px; margin:0; padding:0; background:#ffffff url(zcounter2.gif) no-repeat -45px 0; overflow:hidden;"></div>
<div style="height:9px; width:9px; margin:0; padding:0; background:#ffffff url(zcounter2.gif) no-repeat -54px 0; overflow:hidden;"></div>

顯示結果如下圖：

.



.

由上述代碼可知，是 background 倒數第2個代碼變化而已 ( X軸變動，而Y軸不變 ) ，
這樣就可使用 javascript 改寫成動態方式，變計數器效果，代碼如下：

<div name="zshowcou3" id="zshowcou3"></div>
<script type="text/javascript">
function zshowcou(num2){
var zcou2=""; //輸出用
var s2 = num2.toString(); //布林值轉換為字符串
var s3 = s2.length; //num2長度
var i=0;
zcou2 = "<table border='0' cellpadding='0' cellspacing='0'><tr>";
for(i=0; i<s3; i++){
var d2 = parseInt(s2.substr(i,1)); //parseInt轉成整數，substr截字
var num3 = -9 * d2;
zcou2 = zcou2 + "<td><div style='height:9px; width:9px; margin:0; padding:0; background:#ffffff url(zcounter2.gif) no-repeat " + num3 + "px 0; overflow:hidden;'></div></td>";
}
zcou2 = zcou2 + "</tr></table>";
return zcou2;
}
var ztest2 = zshowcou(987654732101);
//document.write(ztest2); //write方式輸出
document.getElementById("zshowcou3").innerHTML = ztest2; //替換 div 中 zshowcou3 方式輸出
</script>

顯示結果如下圖：

.



.

當然這是要配合 php 或 asp 動態網頁程式，將值放到zshowcou即可。

在製做或找計數器圖檔時，要留意 高度 及 寬度，由其是 寬度 除 10 要整數，
數字 0~9，所以除10，算是將圖切成10等分顯示，滑鼠圖檔右鍵內容可查看，如下圖：

.



.

csscounterv2.zip 範例檔下載，注意是 csscounterv2.zip 這個檔案 (4選1) ：
asuswebstorage.com
pan.baidu.com
skydrive.live
docs.google.com

如果用 docs.google 選到csscounterv2.zip後，要點上方檔案File在點下載Download，才能將zip檔下載，不是一個檔一個檔點這下載。

下載完後，壓解後csscounterv2目錄內，點 b2.htm 就可見 (圖一) 效果，內有數個計數器圖檔可參考，
右鍵檢視源碼，有需要的就copy去用，裡面的註解，建議刪除，key出來方便大家查看，看完刪掉比較好。

推薦文字編輯軟體： Notepad++ 有顏色區分，方便檢視。

.

ps:
算是在用 discuz x 社區茶坊V2 想把按鈕改成圖片樣式，後查找dz編輯它就是用css切圖方式，所有圖片都在同一張，不過相當複雜，看不懂...最後用成3張圖url方式調用，順便也 key 這篇用計數器作範例。

.