如何通過使用Javascript

enter image description here 如何通過使用Javascript

動態剪切圖像我有這樣的圖標的照片，我知道這幅畫可以幫助節省時間HTTP鏈接。但是，我不知道如何使用它。

我想我需要通過座標來獲取小圖標。有沒有圖書館可以做到這一點？ JQuery的？道場？
我怎樣才能得到這張照片？我只知道我可以使用CSS或CSS來展示圖片，但我認爲我需要以另一種方式獲得這張圖片。 Javascript庫可以做這個工作嗎？

來源

2013-04-14 Bryce

Sprites應該與CSS'background-image'和'background-position'屬性一起使用。 – BenM

http://css-tricks.com/css-sprites/是我在Google上發現的第一個教程。 – nnnnnn

除非您在canvas或webgl上下文中使用圖像，否則應該使用css屬性。 – Chad

實際使用非常簡單。讓我們有ui_element類的按鈕。每個按鈕將具有ui_element類和button_***類。
看一看：

.ui_element { 
    background-image: url("http://i.stack.imgur.com/S02fG.png"); 
    width: 24 px; /*May be different for specific buttons*/ 
    height: 24 px; 

} 
.button_home { 
    background-position: -23px -23px; /*Move the main image to the deserved element*/ 

}

然後，從理論上講，下面的代碼應該顯示紅色的「家」圖標：

<div class="ui_element button_home"></div>

你也可以做一些花哨的技巧，懸停likedifferent顯示：

div.button_home { 
    background-position: 0px -23px; /*grey icon*/ 
} 
div.button_home:hover { 
    background-position: -23px -23px; /*red icon*/ 
}

請注意，我的代碼不會顯示正確對齊的所有內容。除非在生成圖像時使用嚴謹的模式，否則無法自動生成CSS代碼。

來源

2013-04-14 12:37:48

沒有辦法做到這一點「動態」，這意味着它將無法找出座標。實現手動你在CSS找什麼你會用

background:url('sprites.png') 0 0;

格式是圖像本身，如何最左邊，並有多遠了。

來源

2013-04-14 12:38:11

如何通過使用Javascript

回答

相關問題