如何使用鼠标悬停停止旋转图像？

Question

I have created a function to rotate images, and now what I would like to do is to stop the images from rotating when I use the mouseover command. this is the js coding I have to get the images to rotate

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

I really did not read your code in detail, but what you could probably do is set a parameter outside the function, maybe a global parameter to the function that rotates your image, call it "rotate" and set it to TRUE

Then, before you make the actual rotation, you check if this "rotate" param set to TRUE, if yes then rotate.

Now, onmouseover, all you have to do is set the "rotate" param to FALSE, and then when it its FALSE when the setTimeout trigger is expires and the function starts again, the imagee would not rotate becaues it failed your test.

Another approach is to set your setTimeout to trigger only when not on mousenotover, so if on mouse over, do not set the timeout, othersie, set the time out.

Those are just two ideas that just came to my mind reading your code, I think you can think about it and decide if those are solutions you like, and if not then I would be interested to know what you decided.

Cheers.

Answer 2

The next code is just an approximation, and is more like a "pseudo code" than a production code. Anyways feel free to modify as you need.

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();