0

画像を回転する関数を作成しましたが、今やりたいことは、マウスオーバー コマンドを使用したときに画像が回転しないようにすることです。これは、画像を回転させるために必要なjsコーディングです

var m = {
Z   : 100,
xm  : 0,
xmm : .25,
ymm : 0,
ym  : 0,
mx  : 0,
nx  : 0,
ny  : 0,
nw  : 0,
nh  : 0,
xR  : 0,
nI  : 0,
scr : 0,
img : 0,

run : function () {
    m.xm += (m.xmm - m.xm) * .1;
    if (m.ym < m.nw * .15) m.ym++;
    m.xR += m.xm;
    for (var i = 0; i < m.nI; i++){
        var A = (i * 360 / m.nI) + m.xR;
        var x = Math.cos(A * (Math.PI / 180));
        var y = Math.sin(A * (Math.PI / 180));
        var a = m.img[i];
        a.style.width  = ''.concat(Math.round(Math.abs(y * m.ym) + y * m.Z), 'px');
        a.style.left   = ''.concat(Math.round((m.nw * .5) + x * ((m.nw * .5) - (m.nw * .05)) - ((Math.abs(y * m.ym) + y * m.Z) * .5)), 'px');
        a.style.height = ''.concat(Math.round(m.ym + y * m.Z), 'px');
        a.style.top    = ''.concat(Math.round((m.nh * .5) - (m.ym * .5) - x * (m.Z * .5) - (m.ymm * y)), 'px');
        a.style.zIndex = 600 + Math.round(y);
        m.setOpacity(a, (y * 50) + 100);
    }
    setTimeout(m.run, 30);
},
4

2 に答える 2

2

私は本当にあなたのコードを詳細に読んでいませんでしたが、おそらくできることは、関数の外側にパラメーターを設定することです。おそらく、画像を回転させる関数にグローバルパラメーターを設定し、それを「回転」と呼び、TRUEに設定します

次に、実際の回転を行う前に、この「回転」パラメータが TRUE に設定されているかどうかを確認し、そうであれば回転します。

onmouseoverで、「回転」パラメーターをFALSEに設定するだけで、setTimeoutトリガーが期限切れになり、関数が再び開始されたときにFALSEになると、テストに失敗したため画像が回転しません。

もう 1 つの方法は、setTimeout を設定して、mousenotover でない場合にのみトリガーするようにすることです。そのため、マウスオーバーの場合はタイムアウトを設定せず、それ以外の場合はタイムアウトを設定します。

これらは、あなたのコードを読んで頭に浮かんだ 2 つのアイデアにすぎません。それについて考えて、それらが好きな解決策であるかどうかを判断できると思います。

乾杯。

于 2012-11-05T03:57:17.767 に答える
1

次のコードは単なる概算であり、製品コードというよりも「疑似コード」に似ています。とにかく、必要に応じて自由に変更してください。

var m = {
run: function() {
    this.isRunning = true;
    // when complete the cycle
    this.cycle = true;
},
play: function() {
    this.timeout = setTimeout((function($this){
        if($this.animCheck !== undefined) clearInterval($this.animCheck);
        $this.run();
    })(this), this.frames);
},
pause: function() {
    this.animCheck = setInterval((function($this) {
        // Obviously, you've to pause the animation when the cycle is finished.
        if($this.cycle) clearTimeout($this.timeout);
    })(this), this.frames);
    return !!this.animCheck;
},
init: function() {
    this.frames = 30;
    this.isRunning = true;
    [the element].addEventListener('mouseover', function() {
        if(this.pause()) this.isRunning = false;
    })
    this.play();
}

};

m.init();

于 2012-11-05T04:22:17.680 に答える