如何創建類似於Grooveshark的進度「欄」？

我很好奇......我將如何去創建一個自定義進度條，就像Grooveshark曾經有的一樣？如果你看下面的圖片，進度條是一個鯊魚形狀的圖像，並在頁面加載時填充。如何創建類似於Grooveshark的進度「欄」？

Grooveshark Progress Bar

我覺得這是非常酷的，很想知道它是怎麼做的。這可以通過編程完成，還是在閃存中完成？如果可能的話，我真的很想在JavaScript（jQuery）中執行此操作。我在哪裏/如何開始？

謝謝，赫里斯託斯

來源

2010-12-12 Hristo

含有鯊圖像的一部分可以是具有切出的鯊魚形狀的PNG。將一個元素放在這個下面（通過z-index），並將它的寬度設置爲動畫，這會給人一種填充鯊魚的印象。

我設法使用無非是一個圖像，並使用動畫背景圖片：http://jsbin.com/imibe3

HTML

<img src="http://sampsonresume.com/labs/emptyfish.png" class="fish" />

CSS

img.fish { 
    background-color:#f1f1f1; 
    background-image:url(water_640x480.jpg); 
    background-position:-580px 0; 
    background-repeat:no-repeat; 
}

的jQuery/JavaScript的

$("img.fish").animate({ 'backgroundPosition':'+=600px 0' }, 10000);

來源

2010-12-12 05:38:07 Sampson

是...我問如何在填充效果得到。我喜歡你的建議;它似乎是一個合理的方式來做到這一點，但它似乎更像是一個黑客:)必須有一種方法來使用像jQuery和HTML 5做到這一點？ – Hristo 2010-12-12 06:37:34

@Hristo我不認爲這真的是一個黑客。我剛剛使用單個圖像元素更新了我的帖子。 – Sampson 2010-12-12 07:34:21

+1。你確實是一個熟練的「Javascripter」:) – 2010-12-12 12:36:52

如何創建類似於Grooveshark的進度「欄」？

回答

相關問題