如何创建进度“栏”类似于 Groovshark？

Question

我很好奇...我该如何创建一个像 Grooveshark 以前那样的自定义进度条？如果您查看下图，您会发现进度条是鲨鱼形状的图像，并在页面加载时填充。

我认为这非常酷，并且很想知道它是如何完成的。这可以通过编程方式完成，还是在闪存中完成？如果可能的话，我真的很想用 JavaScript (jQuery) 来做到这一点。我从哪里开始/如何开始？

谢谢， 赫里斯托

Answer 1

图像中包含鲨鱼的部分可以是剪掉鲨鱼形状的 PNG。在其下方放置一个元素（通过 z-index），并对它的宽度进行动画处理，会给人一种鲨鱼填充的印象。

我成功地只使用图像来完成类似的事情，并对其背景图像进行动画处理：< a href="http://jsbin.com/imibe3">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);​