0

Snowbird ( http://www.snowbird.com/ ) は、サイトで非常に優れた機能を提供しています。私が気に入っていることの 1 つは、右側の黒いパネルにカーソルを合わせると、別のパネルが反転し、チャートがカウントアップし、オレンジ色のグラフが最終位置まで「回転」することです。CSS3 または JS を使用して、グラフ内で回転するオレンジ色のバーを再現したいと考えています。彼らはcanvas、私が今まで使ったことのない要素を使用しているようですが、それに対してオープンです。これを処理する最善の方法について何か考えはありますか?

ありがとう！

4

1 に答える 1

1

はい、そのためにキャンバスを使用しています。出発点は次のとおりです。

var c = document.getElementById('c').getContext('2d');
var duration = 700; // duration of animation
var delay = 10; // interval
var stepT = duration/delay; // steps needed
var cT = 0; // step counter

c.fillStyle = 'white'
var end = 58; // endpoint in percent

var int = setInterval(function(){
    c.fillRect(0,0,100,100);
    c.strokeStyle = 'orange';
    c.beginPath();
    c.arc(50, 50, 40, -.5*Math.PI, (-.5*Math.PI + 2*Math.PI / 100 * end * cT / stepT));
    c.lineWidth = 10;
    c.stroke();
    if(++cT>stepT){
        clearInterval(int);   
    }
},delay);

デモ: http://jsfiddle.net/SCk6B/

複数の円を含むバージョン 2:

<canvas class="circle" data-duration="700" data-end="75" width="100" height="100"></canvas>
<canvas class="circle" data-duration="200" data-end="50" width="100" height="100"></canvas>
<canvas class="circle" data-duration="500" data-end="20" width="100" height="100"></canvas>


$('.circle').each(function(){
    var duration = $(this).data('duration') || 700; // duration of animation
    var delay = 10; // interval
    var stepT = duration/delay; // steps needed
    var cT = 0; // step countervar
    var end = $(this).data('end') || 58; // endpoint in percent
    var int = null;
    var c = this.getContext('2d');
    c.fillStyle = 'white';
    c.lineWidth = 10;
    c.strokeStyle = 'orange';
     $(this).bind('mouseenter',function(){
        int = setInterval(function(){
            c.fillRect(0,0,100,100);
            c.beginPath();
            c.arc(50, 50, 40, -.5*Math.PI, (-.5*Math.PI + 2*Math.PI / 100 * end * cT / stepT));
            c.stroke();
            if(++cT>stepT){
                clearInterval(int);   
            }
        },delay);
    }).bind('mouseleave',function(){
        clearInterval(int);
        c.fillRect(0,0,100,100);
        cT=0;
    });
});

http://jsfiddle.net/t3BPP/

于 2013-04-27T23:41:46.520 に答える