1

段落のすべての文字を jQuery でスパンして、後でアニメーション化します。

// span each character
$('#testText p').children().andSelf().contents().each(function(){
    if (this.nodeType == 3) {
        var $this = $(this);
        $this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
    }
});

// store each span
$spanCharacters = $('#testText p span');

私は約800文字を持っています。非常に遅くなります...もっと速くする方法はないかと思いました。

今のように、すべてのスパンのスタイルを作成します:

<span style="position: relative; top: 8.763065797205456px; left: 0px;">i</span>

位置を直接変更することはできますか？

これが完全なコードです。draw メソッドがオフになっていることに注意してください。

オンにすると、動作が遅くなることに注意してください。

var TWO_PI = 6.2831855;

var frameCount = 0;

var $spanCharacters = new Array();

$(document).ready(function() {   

    // span each character
    $('#testText p').children().andSelf().contents().each(function(){
        if (this.nodeType == 3) {
            var $this = $(this);
            $this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
        }
    });

    // store each span
    $spanCharacters = $('#testText p span');

    //var handle = setInterval(draw, 80);
    draw();

});



function draw() {
    frameCount++;

    var width = 500;


    $spanCharacters.each(function() {

        var offsetLeft = $(this).offset().left;
        var offsetTop = $(this).offset().top;

       var posLeft = $(this).position().left;

       var a = map(posLeft+frameCount, 0, width/5, 0, TWO_PI);
       var c = Math.cos(a);

        var addOffset = c*10;
        //console.log(addOffset);

       $(this).offset({ top: offsetTop+addOffset, left: offsetLeft });

    });
}

function map(value, istart, istop, ostart, ostop) {
    return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
 }

要するに、これをどのように高速化できますか?

http://jsfiddle.net/LwD42/4/

4

3 に答える 3

3

$.offset()おそらく必要のない多くのチェックを行います。また、jQuery オブジェクトを常に再作成するのではなく、キャッシュする必要があります。例えば：

に置き換え$(this)てvar self = $(this)、単に呼び出しを行いますself。$()関数 jQuery を使用するたびに、別のオブジェクトが作成されます。

次のようにすると、はるかに高速になります。

$spanCharacters.each(function() {
   var a = map(this.offsetLeft + frameCount, 0, width/5, 0, TWO_PI);
   var c = Math.cos(a);

   var addOffset = c * 10;

   this.style.position = "relative";
   this.style.top = addOffset + "px";
});

http://jsfiddle.net/LwD42/9/

2 つを比較したパフォーマンス テストを次に示します。http://jsperf.com/span-position-speed-test/ このバージョンは、私のブラウザーでは約 2 倍高速です。それでも比較的遅いですが、非常に多くの DOM 要素を編集しているため、常にそうなるでしょう。

于 2013-05-29T14:16:32.557 に答える
0

フレームカウントを変更して、1 つ以上移動することができます 

function draw() {
frameCount+=10;
var width = 500;
$spanCharacters.each(function() {
   var offsetLeft = $(this).offset().left;
   var offsetTop = $(this).offset().top;
   var posLeft = $(this).position().left;
   var a = map(posLeft+frameCount, 0, width/5, 0, TWO_PI);
   var c = Math.cos(a);
   var addOffset = c*10;
   $(this).offset({ top: offsetTop+addOffset, left: offsetLeft });
});
}

.animate を使用して、このjsfiddleの上部を設定します

于 2013-05-29T16:17:39.200 に答える