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

【问题标题】：How do I create a progress "bar" similar to Grooveshark?如何创建类似于 Grooveshark 的进度“栏”？
【发布时间】：2010-12-12 05:10:02
【问题描述】：

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

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

谢谢，赫里斯托

【问题讨论】：

【解决方案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);

【讨论】：

是的...我在问如何获得填充效果。我喜欢你的建议；这似乎是一种合理的方法，但它似乎更像是一种 hack :) 必须有一种方法可以使用 jQuery 和 HTML 5 来做到这一点？
@Hristo 我不认为这真的是一个黑客。我刚刚用一个使用单个图像元素的实时示例更新了我的帖子。