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

Question

我很好奇......我将如何创建像Grooveshark一样的自定义进度条？如果您查看下面的图像,则进度条是一个鲨鱼形状的图像,并在页面加载时填充.

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

谢谢,Hristo

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