Javascript 鼠标悬停时设置间隔未清除_Javascript_Jquery

Javascript 鼠标悬停时设置间隔未清除

javascript jquery

Javascript 鼠标悬停时设置间隔未清除,javascript,jquery,Javascript,Jquery,所以我有两个问题。首先，当鼠标光标位于图像上方时，图像继续旋转，因此clearInterval似乎不起作用。第二个是rightDisc，即设置间隔在rightDisc上似乎不起作用。所有其他功能都可以工作。我试着和网络工作者一起研究线程，但这让我很困惑 <html> <head> <script src="../js/jquery-1.6.4.min.js"></script> <script src="../js/imgRo

所以我有两个问题。首先，当鼠标光标位于图像上方时，图像继续旋转，因此clearInterval似乎不起作用。第二个是rightDisc，即设置间隔在rightDisc上似乎不起作用。所有其他功能都可以工作。我试着和网络工作者一起研究线程，但这让我很困惑

<html>
<head>
    <script src="../js/jquery-1.6.4.min.js"></script>
    <script src="../js/imgRotate.js"></script>
    <script>
    $(function()
    {
        $("#leftDisc").rotate();
        $("#rightDisc").rotate();
    });
    </script>
</head>
<body>
    <div>
        <img id="turnTableImage" src="turntable.jpg" height="400" width="600" alt="" />
    </div>

    <div id="leftDisc" style="margin-top: -280px; margin-left: 50px">
        left<img id="leftDiscImg" class="discs" height="200" src="disc.png" alt="" />
    </div>

    <div id="rightDisc" style="margin-top: -300px; margin-left: 350px">
        <img id="rightDiscImg" class="discs" src="disc.png" alt="" />right
    </div>
</body>

在jsfiddle.net上发布演示。应该学会缓存选择器。多次使用

$（“#leftDiscImg”）

意味着对DOM进行多次搜索…在变量中缓存也会减少搜索量。您是否尝试过使用

mouseenter

而不是

mouseover

？还有..控制台中是否抛出错误？@charlietfl更不用说连续调用

css

5次，因为它可以被调用一次<代码>$discImg=$（“#leftDiscImg”）$css（{'transform'：'rotate（）'/*../}）简短的回答是，当间隔变量被清除或函数未实际启动时，它不在范围内。同意charlietfl post fiddle，否则控制台调试听起来很正常。清理代码并使其在双方都能工作。

(function($) {  
$.fn.rotate = function() {
    var img = this.find(".discs");
    var imgpos = img.position();
    var x, y, xCenter, yCenter, x1, y1, deg = 1, drag = false;

    var interval = setInterval(function() {
        deg++;
        $("#leftDiscImg").css("transform","rotate("+deg+"deg)");
        $("#leftDiscImg").css("-moz-transform","rotate("+deg+"deg)");
        $("#leftDiscImg").css("-webkit-transform","rotate("+deg+"deg)");
        $("#leftDiscImg").css("-o-transform","rotate("+deg+"deg)");
        $("#leftDiscImg").css("ms-transform","rotate("+deg+"deg)");
    }, 20);

    $(window).load(function() {
        img.removeAttr("width");
        img.removeAttr("height");

        xCenter = imgpos.left + (img.width() / 2);
        yCenter = imgpos.top + (img.height() / 2);
    });

    img.mousemove(function(e) {
        x1 = e.pageX;
        y1 = e.pageY;
        x = x1 - xCenter;
        y = y1 - yCenter;

        r = 360 - ((180/Math.PI) * Math.atan2(y,x));

        if (drag == true) {
            img.css("transform","rotate(-"+r+"deg)");
            img.css("-moz-transform","rotate(-"+r+"deg)");
            img.css("-webkit-transform","rotate(-"+r+"deg)");
            img.css("-o-transform","rotate(-"+r+"deg)");
            img.css("ms-transform","rotate(-"+r+"deg)");
        }
    });

    img.mouseover(function() {
        clearInterval(interval);
        deg = 1;

        if (drag == false) {
            drag = true;
        } else {
            drag = false;
        }
    });

    img.mouseout(function() {
        drag = false;

        interval = setInterval(function() {
            deg++;
            $("#leftDiscImg").css("transform","rotate("+deg+"deg)");
            $("#leftDiscImg").css("-moz-transform","rotate("+deg+"deg)");
            $("#leftDiscImg").css("-webkit-transform","rotate("+deg+"deg)");
            $("#leftDiscImg").css("-o-transform","rotate("+deg+"deg)");
            $("#leftDiscImg").css("ms-transform","rotate("+deg+"deg)");
        }, 20);
    });
}; 
})( jQuery );