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 這篇用計數器作範例。

.

沒有留言:

張貼留言

由於經常被灌水, 所以您再發表留言之後, 需要耐心的等待博客主之審核, 於審核過後才會公開您的留言, 因此請您不要重複的留言, 謝謝您的留言
Hello my friend, I have no money, My blog is super chill, Please do not screw me in the replies at the bottom of the article, thank you very much