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

Question

我很好奇......我将如何创建像Grooveshark曾经拥有的自定义进度条？如果你看下面的图像，进度条就是一个鲨鱼形状的图像，并在页面加载时填充。

我觉得这很酷，很想知道它是如何完成的。这可以通过编程方式完成，还是在flash中完成？如果可能的话，我真的想在JavaScript（jQuery）中这样做。我/从哪里开始？

谢谢， 赫里斯托斯

Answer 1

包含鲨鱼的图像部分可以是切出鲨鱼形状的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);​