Question

我试图让这两个物体在鼠标悬停时摆动。独立。所以，当我将鼠标悬停在box1上时它将会摆动，然后当我离开它时它会慢慢地停止摆动。然而他们似乎都冻结了。

任何人都可以看到原因并帮我修复它吗？

这是我的Js：

(function swing() {
    var ang  = 20,
    dAng = 10,
    ddAng = .5,
    dir  = 1,
    box = document.getElementById("box");

function setAng(ang,div){

if (div == "box") {

    document.getElementById("box").style.WebkitTransform =  'rotate('+ang+'deg)';

    document.getElementById("box").style.MozTransform =  'rotate('+ang+'deg)';
    dir = -dir;
    if (dAng > 1)
        dAng -= ddAng;

    if (Math.abs(ang) > 0) {
        setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng))
    }

}

if (div == "box2") {

    document.getElementById("box2").style.WebkitTransform =  'rotate('+ang+'deg)';

    document.getElementById("box2").style.MozTransform =  'rotate('+ang+'deg)';
    dir = -dir;
    if (dAng > 1)
        dAng -= ddAng;

    if (Math.abs(ang) > 0) {
        setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng))
    }

}
};


document.getElementById("box").onmouseover = function(){
    var div = document.getElementById("box");
    document.getElementById("box").style.WebkitTransform =  'rotate(-20deg)';
    document.getElementById("box").style.MozTransform =  'rotate(-20deg)';
    setTimeout(function(){
        setAng(20, "box")
    }, 1000);
}

document.getElementById("box2").onmouseover = function(){
    var div = document.getElementById("box2");
    document.getElementById("box2").style.WebkitTransform =  'rotate(-20deg)';
    document.getElementById("box2").style.MozTransform =  'rotate(-20deg)';
    setTimeout(function(){
        setAng(20, "box2")
    }, 1000);
}


})();

这是JSFiddle：http://jsfiddle.net/z3s7v/1/

先谢谢你们:)

Answer 1

问题在于变量ang，dAng，ddAng = .5，dir，它们在每个onmouseover函数调用中使用，尝试类似的东西

(function(){

var box=document.getElementById('box');box2=document.getElementById('box2');

swing(box);swing(box2);

function swing(box) {
   var ang  = 20,
       dAng = 10,
       ddAng = .5,
       dir  = 1;

function setAng(ang){
    box.style.WebkitTransform =  'rotate('+ang+'deg)';
    box.style.MozTransform =  'rotate('+ang+'deg)';
    dir = -dir;
    if (dAng > 1)
        dAng -= ddAng;

    if (Math.abs(ang) > 0)
        setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng));
};

box.onmouseover = function(){    
    box.style.WebkitTransform =  'rotate(-20deg)';
    box.style.MozTransform =  'rotate(-20deg)';
    setTimeout(function(){
        setAng(ang)
    }, 1000);
}

};
}())

修改我创建了一个简单的网页，用于在jsfiddle之外测试这段代码，它可以工作，下面是我的html页面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="StyleSheet.css" /> </head> <body> <div id="box" class="box"> <div class="pin"></div> </div> <div id="box2" class="box2"> <div class="pin2"></div> </div> <script type="text/javascript"> (function () { var box = document.getElementById('box'); box2 = document.getElementById('box2'); swing(box); swing(box2); function swing(box) { var ang = 20, dAng = 10, ddAng = .5, dir = 1; function setAng(ang) { box.style.WebkitTransform = 'rotate(' + ang + 'deg)'; box.style.MozTransform = 'rotate(' + ang + 'deg)'; dir = -dir; if (dAng > 1) dAng -= ddAng; if (Math.abs(ang) > 0) setTimeout(setAng, 1000, dir * (Math.abs(ang) - dAng)); }; box.onmouseover = function () { box.style.WebkitTransform = 'rotate(-20deg)'; box.style.MozTransform = 'rotate(-20deg)'; setTimeout(function () { setAng(ang) }, 1000); } }; } ()); </script> </body>

Answer 2

您忘记在setTimeout（）

中设置“function（）”

function setAng(ang,div){

if (div == "box") {
    document.getElementById("box").style.WebkitTransform =  'rotate('+ang+'deg)';   
    document.getElementById("box").style.MozTransform =  'rotate('+ang+'deg)';
    //document.getElementById("box").style.WebkitTransform =  'rotate('+ang+'deg)';

    dir = -dir;
    if (dAng > 1)
    {
        dAng -= ddAng;              
    }   

    if (Math.abs(ang) > 0) {  
        // Here you have forgot "function()"
        setTimeout(function(){
        setAng(dir * (Math.abs(ang)-dAng), div)
        }, 1000);              
    }

}

现在你可以在“小盒子”中摆弄它

多个物体不摆动，保持冰冻

2 个答案: