我有一个名为“progressbar.png”的图像。有没有一种方法可以使用 PHP 或 Javascript 裁剪此图像，每次页面加载时，图像都会根据进度百分比进行裁剪并加载到页面中。例如，如果图像为 200 像素宽，则在 25% 的进度下，图像将被裁剪为仅 50 像素宽。
问问题
463 次
3 回答
3
制作一个 div，将 div 的背景设置为您的图像，并将 div 的宽度操作为您想要的任何内容。
HTML：
<div id="progressbar"></div>
CSS：
#progressbar{
background:url(progressbar.png) top left;
height:progressbarheightpx;
}
Javascript：
document.getElementById('progressbar').style.width='50px'
或者可以在 PHP 中通过简单地将宽度直接打印到 div 来完成：
<div id="progressbar" width="<?php echo $percent_done*200;?>px"></div>
于 2012-06-28T02:15:04.497 回答
0
您可以将 img 标签包装在 div 中。使用 css 将溢出标记为隐藏，使用 javascript 动态设置宽度。但是，您可能想查看 jQueryUI 的进度条。
于 2012-06-28T02:15:56.657 回答
0
每次百分比变化时，裁剪服务器端（使用 PHP）都需要一个新文件的请求。
使用 JavaScript 裁剪图像可以通过使用<canvas>（请参阅在 Javascript 中复制和裁剪图像）来完成，尽管这将是一个巨大的开销。
只需使用 CSS，它有几种技术可以仅显示元素的剪切。请参阅CSS 显示调整大小和裁剪的图像、使用 HTML 和 CSS 剪辑图像或如何使用 CSS 在图像上显示区域
BTW：通常不需要使用图像作为进度条。使用适当样式的简单 DOM 元素要容易得多，HTML5 甚至提供了<progress>标签。请参阅如何制作进度条
于 2012-06-28T02:18:32.970 回答