javascript - ポップアップ ダイアログ ボックスがアクティブなときに画像の回転を停止する

Question

私はJavaScript関数を使用して画像を軌道的に回転させています。また、ポップアップ ダイアログ ボックスも作成しました。私がやろうとしているのは、ダイアログボックスがアクティブなときに、画像からマウスアウトしても画像が停止するようにすることです。

これが私が作った私のjavascript関数です:

var popupStatus = 0;
var timer = null;
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);
    }
    timer = setTimeout(m.run, 30);
},

resize : function () {
    m.nx  = m.scr.offsetLeft;
    m.ny  = m.scr.offsetTop;
    m.nw  = m.scr.offsetWidth;
    m.nh  = m.scr.offsetHeight;
},

mousemove : function (e) {
    if (window.event) e = window.event;
    m.xmm = (m.nx + (m.nw * .5) - (e.x || e.clientX)) / (m.nw * .25);
    m.ymm = (m.ny + (m.nh * .5) - (e.y || e.clientY)) / (m.nh * .005);
},

setOpacity : function (obj, a) {
    if (a < 0) a = 0; else if (a > 100) a = 100;
    if (obj.filters) obj.filters.alpha.opacity = a;
    else obj.style.opacity = a / 100;
},

init : function () {
    m.scr = document.getElementById("screen");
    m.img = m.scr.getElementsByTagName("img");
    m.nI  = m.img.length;
    window.onresize = m.resize;

    m.resize();
    m.ym = m.Z;
    m.run();
}


}
function stop(){
clearTimeout(timer);
}


onload = function() {
m.init();
}





function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
    $("#backgroundPopup").css({
        "opacity": "0.7"
    });
    $("#backgroundPopup").fadeIn("slow");
    $("#popupContact").fadeIn("slow");
    popupStatus = 1;
}
();
}


function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
    $("#backgroundPopup").fadeOut("slow");
    $("#popupContact").fadeOut("slow");
    popupStatus = 0;
}
}

//centering popup
function posPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
    "position": "absolute",
    "top": windowHeight/2-popupHeight/350,
    "left": windowWidth/2-popupWidth/8
});
//only need force for IE6

$("#backgroundPopup").css({
    "height": windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP
//Click the button event!
$("#button").click(function(){
    //centering with css
    posPopup();
    //load popup
    loadPopup();
    stop();

});
});