3

少し問題があります。円形スライダーを作成する必要があります。役立つライブラリが見つからなかったので、自分で作成する必要があるようです。
これが私の問題です：
ここに画像の説明を入力

上の図のようなものを作成したいのですが、たとえばそのグラデーションの一部をロードする方法が見つかりません:

ここに画像の説明を入力

画像の一部をjsにロードすることさえ可能ですか?

4

4 に答える 4

2

純粋な JavaScript で画像の一部を読み込む方法はありません。代わりに、スプライト画像を使用して背景位置で遊ぶことができます。

function getBgPos(pct) {
  if (pct < 12.5) { return '0 0'; }
  else if (pct < 25) { return '-100px 0'; }
  else if (pct < 37.5) { return '-200px 0'; }
  else if (pct < 50) { return '-300px 0'; }
  else if (pct < 62.5) { return '-400px 0'; }
  else if (pct < 75) { return '-500px 0'; }
  else if (pct < 87.5) { return '-600px 0'; }
  else if (pct < 100) { return '-700px 0'; }
  else { return '-800px 0'; }
};

i = 0;
setInterval(function () {
  jQuery('#loader').css('background-position', getBgPos(i));
  i += 12.5; if (i > 100) i = 0;
}, 500);
#loader {
  display: block;
  width: 100px;
  height: 100px;
  background: yellow url(https://i.stack.imgur.com/Xsf4k.png) no-repeat 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="loader" src="https://i.stack.imgur.com/ArcTX.png" />

于 2013-03-07T13:40:20.633 に答える
2

画像を動的に置き換える必要がない場合は、Photoshop などの画像ツールで準備することをお勧めします。

置き換える画像が少ない場合は、Photoshop で準備し、javascript と css ソリューションを使用して変更します

そうでなければ私は知りません。

于 2013-03-05T20:12:50.847 に答える
1

あなたは後方互換性を求めているので、私はバートランドの提案から構築するつもりです. . . スライダーのさまざまな「段階」 (つまり、20% 完了、40% 完了など) をすべて含む「スプライト」画像を簡単に作成し、その各段階を別の CSS クラスで参照することができます。

そうすれば、ページの読み込み時にすべてのステージが 1 つの画像として読み込まれ、スライダーを表示する要素のクラスを JavaScript で更新して、スライダーの進行を更新することができます。

于 2013-03-05T20:22:19.207 に答える
0

キャンバスオプションに同意します。また-あなたがやろうとしていることに基づいて、私はお勧めします-http://anthonyterrien.com/knob/

文字盤自体を画像でカスタマイズし、露出部分の色を設定できます。それはあなたの完全な解決策ではないかもしれません-しかし理想的にはあなたを正しい方向に向けます。

于 2013-03-05T20:18:14.527 に答える