1

これは私が欲しいコードです.. http://p.ar2oor.pl/cprogress/それはまさに私のプロジェクトに必要なものです。ダウンロード ファイルにはコードが含まれていますが、実装手順は含まれていません。jquery xp がないので、実装方法がわかりません。ページ ソースの html を使用し、Google cdn を介して jquery をリンクしました。これがフィドルです。

http://jsfiddle.net/ebenhafkamp/abrdz924/ 

<div class="radial">
    <div class="jCProgress" style="opacity: 1;"></div>
    <div class="percent" style="display: block;">70</div>
    <canvas width="105" height="105">
</div>

これは基本的にサイトのコードをコンパイルしたもので、js は純粋にダウンロード リンクに書かれているもので、ドキュメントから使用したのは css だけです。それが本来あるべきものをどのように生み出すことができるのか、私にはわかりません。誰かが私のためにこれに光を当てることができます..

4

1 に答える 1

1

このリンクにファイルを含めます: http://p.ar2oor.pl/cprogress/jCProgress-1.0.3.js 次に、実装手順が示すように実行します。

HTML

<div id="my-cprogress"></div>

Javascript

$('#my-cprogress').cprogress({
           percent: 10, // starting position
           img1: 'v1.png', // background
           img2: 'v2.png', // foreground
           speed: 200, // speed (timeout)
           PIStep : 0.05, // every step foreground area is bigger about this val
           limit: 20, // end value
           loop : false, //if true, no matter if limit is set, progressbar will be running
           showPercent : true, //show hide percent
           onInit: function(){console.log('onInit');},
           onProgress: function(p){console.log('onProgress',p);}, //p=current percent
           onComplete: function(p){console.log('onComplete',p);}
      });

ここにフィドルがあります：http://jsfiddle.net/abrdz924/1/

注:背景用に 2 つの既存の画像 ('img1' と 'img2') を提供する必要があることに注意してください。私が指定したURIが無効であるため、フィドルではそれらが表示されません。

于 2015-07-24T13:20:47.883 に答える