武林網(www.vevb.com)文章簡介:Css Sprite,有時也稱為雪碧圖、精靈圖,是每一個前端開都會遇到的問題,也是常見的小圖片加載優化手段。相信各位同學都清楚其原理,具體就不贅述了。
Css Sprite,有時也稱為雪碧圖、精靈圖,是每一個前端開都會遇到的問題,也是常見的小圖片加載優化手段。相信各位同學都清楚其原理,具體就不贅述了。
之前一直有動機利用html5實現一個合成雪碧圖的工具,方便小項目的快速開發,減少一些諸如開photoshop、fireworks等工具來合圖的機械勞動,最近終於抽出時間將構思實現。
Go!Png介紹:目前實現的功能如下:
使用說明:1.拖拽圖片小文件到操作區域,如下圖: 2.輸入類屬性設置與目標圖片、css文件生成,如下圖3.生成的css文件是可以通過改變css模版來定制的使用的模版函數是John Resig的Micro-Templating,
可以用的變量有:
x、y、w、h的解釋如下圖:
css模版的設置操作如下圖:
4.生成目標圖片、css後可以直接下載點擊download按鈕即可完成下載:
5.工作狀態導出這個功能是可以將你目前的工作狀態,包括圖片的數據(圖片、圖片位置排列),參數設置(包括主頁的參數設置與css模版設置),全部導出成一個文件,下次利用此文件便可複原工作狀態。
導出如下圖:
導入如下圖:
即可複原: