如何停止使用鼠標懸停進行旋轉的圖像？

Question

我創建了一個功能，旋轉圖像，現在我想要做的就是停止轉動的圖像時，我用的是鼠標懸停命令。這是編碼我得圖像旋轉

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); 
}, 

Answer 1

我還真沒仔細閱讀你的代碼，但你很可能不被設定的功能之外的參數，也許一個全局參數的js的那你的旋轉圖像功能，稱之爲「旋轉」，並將其設置爲TRUE

然後，使實際旋轉之前，你是否這個「旋轉」參數設置爲true，如果是再旋轉。

現在，onmouseover，您只需將「rotate」參數設置爲FALSE，然後當setTimeout觸發器失效並且該函數再次啓動時，該參數爲FALSE，則imagee將不會旋轉，因爲它失敗測試。

另一種方法是設置你的setTimeout觸發只有當不上mousenotover，因此，如果在鼠標懸停時，不設置超時，othersie，設置超時。

這些只是我腦海中讀到代碼的兩個想法，我認爲你可以考慮並決定是否你喜歡的解決方案，如果不是，那麼我會有興趣知道你的決定。

乾杯。

Answer 2

下面的代碼只是一個近似值，而更像是一個「僞代碼」不是一個產品代碼。無論如何隨意修改，因爲你需要。

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（）;