我该如何创建一个类似Grooveshark的进度“条”？

Question

3

我很好奇...我怎样才能创建类似 Grooveshark 曾经使用的自定义进度条呢？如果您查看下面的图像，进度条是一只鲨鱼形状的图片，并且随着页面加载而填充。 Grooveshark Progress Bar

我认为这非常酷，想知道它是如何实现的。它可以通过编程完成，还是必须使用 Flash？如果可以的话，我真的很想使用 JavaScript（jQuery）来实现。从哪里/如何开始？

谢谢， Hristo

- Hristo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

图像中包含鲨鱼的部分可以是一个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);