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

Question

我已经创建了一个旋转图像的函数，现在我想做的是当我使用鼠标悬停命令时停止图像旋转。这是我必须让图像旋转的 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);
},

Answer 1

我确实没有详细阅读你的代码，但你可能会做的是在函数外部设置一个参数，也许是旋转图像的函数的全局参数，将其称为“旋转”并将其设置为 TRUE

然后，在进行实际旋转之前，检查此“旋转”参数是否设置为 TRUE，如果是，则旋转。

现在，在鼠标悬停时，您所要做的就是将“旋转”参数设置为 FALSE，然后当 setTimeout 触发器到期并且函数再次启动时它为 FALSE 时，图像将不会旋转，因为它未通过测试.

另一种方法是将 setTimeout 设置为仅在鼠标未悬停时触发，因此如果鼠标悬停，则不要设置超时，其他情况下，设置超时。

这些只是我在阅读您的代码时想到的两个想法，我认为您可以考虑一下并决定这些是否是您喜欢的解决方案，如果不是，那么我有兴趣知道您的决定。

干杯。