javascript - 如何创建类似于 Grooveshark 的进度 "bar"？

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);​