1

所以我有2个问题。首先是 clearInterval 似乎没有工作，因为当鼠标光标在图像上时图像继续旋转。第二个是rightDisc 是setInterval 似乎对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>

imgRotate.js

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

0 回答 0