「progressbar.png」という画像があります。ページが読み込まれるたびに、進行状況のパーセンテージに応じて画像がトリミングされ、ページに読み込まれます。たとえば、画像の幅が 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'
または、幅を div に直接出力するだけで、PHP で実行できます。
<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 を使用した画像のトリミングは、を使用して行うことができます( Javascript での画像のコピーとトリミング を<canvas>参照)。ただし、これは大きなオーバーヘッドになります。
CSS を使用するだけで、要素の切り抜きのみを表示するためのテクニックがいくつかあります。CSS でサイズ変更およびトリミングされた画像を表示する、HTML と CSS で画像をクリップする、またはCSSで画像の領域を表示する方法を参照してください。
ところで: 通常、プログレス バーに画像を使用する必要はありません。適切にスタイル設定されたシンプルな DOM 要素を使用すると、はるかに簡単になります。HTML5 では<progress>タグも提供されます。進行状況バーの作成方法を参照してください
于 2012-06-28T02:18:32.970 に答える