jQuery如何加載圖像的一部分

我有一個小問題。我需要創建圓形滑塊，我沒有找到任何可以幫助我的庫，所以好像我需要自己寫。
這裏是我的問題：
enter image description here jQuery如何加載圖像的一部分

我想創建上面的圖片類似的東西，但我不能找到一種方法來加載gradiant的一部分。例如：

enter image description here

它甚至有可能在js中加載圖像的一部分？

來源

2013-03-05 user1409508

你是如何顯示出圖像，你用''

我想你可以使用canvas元素並在圖片上創建某種遮罩來完成此操作。不完全確定如何，但我相信這是可能的。 – 2013-03-05 20:05:28

http：// stackoverflow。com/questions/12673527/html5-canvas-use-image-as-mask – VoronoiPotato 2013-03-05 20:05:52

如果您不需要動態替換圖像，我會建議在Photoshop等圖像工具中進行準備。

，如果你有幾張圖片來替換，我會在Photoshop做準備，並通過JavaScript和CSS的解決方案

，否則我不知道更改。

來源

2013-03-05 20:12:50 Bertrand

我同意畫布選項。此外 - 基於你正在嘗試做什麼，我會建議 - http://anthonyterrien.com/knob/

我用圖像自定義撥號本身，你可以設置顯示部分的顏色。這可能不是您的全面解決方案 - 但理想情況下，您會指出正確的方向。

來源

2013-03-05 20:18:14 mikevoermans

既然你打算向後兼容，那麼我會建立Bertrand的建議。。。你可以很容易地製作一個包含滑塊各種「階段」（即完成20％，完成40％等）的「精靈」圖像，並在不同的CSS類中引用它的每個階段。

通過這種方式，所有的階段都會在頁面加載時作爲一個圖像加載，您可以使用JavaScript更新顯示滑塊的元素的類，更新滑塊的進度。

來源

2013-03-05 20:22:19 talemyn

將會有水平滑塊，該值將顯示在該圓形滑塊上。所以它需要動態的方法（這是我的學校項目） – user1409508 2013-03-05 20:31:30

那麼，理論上，你仍然可以做到這一點。。。你只需要在精靈文件中爲滑塊的每個可能的值設置一個狀態。但是，如果滑塊從1到100，並且可以以1爲步進上下移動，則會產生非常大的精靈。雖然大精靈文件並不罕見。 – talemyn 2013-03-05 20:38:07

只要動態地改變它，那實際上會非常簡單（儘管如此，大）。您將爲每個滑塊點創建一個樣式，並將相應類名稱的每個點的值作爲一部分。這樣，您可以直接將滑塊值提供給更改類的函數，以作爲更新類名的一部分。 – talemyn 2013-03-05 20:41:57

無法在純Javascript中加載圖像的一部分。相反，你可以使用精靈圖像和背景的位置（download demo here）玩：

HTML：

<img id="loader" src="mask.png" />

CSS：

#loader { 
    display: block; 
    width: 50px; 
    height: 50px; 
    background: white url(sprite.png) no-repeat 0 0; 
}

的Javascript：

function getBgPos(pct) { 
    if (pct < 12.5) { return '0 0'; } 
    if (pct < 25) { return '-50px 0'; } 
    if (pct < 37.5) { return '-100px 0'; } 
    // and so on... 
}; 
jQuery('#loader').css('background-position', getBgPos(10));

mask.png ：

sprite.png：

enter image description here

來源

2013-03-07 13:40:20 leaf

jQuery如何加載圖像的一部分

回答

相關問題