jquery - 旋转图像在开始时不需要转

Question

我正在尝试改进来自 http://www.htmldrive.net/items/show/1114/-Rotating-hover-Image-with-JQuery 的一些代码

所以问题是:- 当我单击图像(按住鼠标)时，图像将开始旋转。我怎样才能停止第一次旋转。

Fiddle

 r = 360 - Math.round(((180/Math.PI) * Math.atan2(y,x)));
        rDiff = r - rTmp;
 if(isFirst != 1) {  
            r = img.rotation + rDiff;
            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.rotation = img.rotation + rDiff;
 } else {
           isFirst = 0;
           // rDiff should be small next time?
 }
 rTmp = r;

我正在尝试过滤第一个旋转。为了更好的代码 View ，请尝试 fiddle 。

Answer 1

您想限制图像在任何时候可以旋转的最大量。这并没有修复初始计算，但它确实增加了最大旋转速度的想法。添加一个名为 maxRotate 的全局变量。这将控制图像旋转在任何时候可以改变的速度。请看下面的代码:

var selectedImg;
var drag = 0;
var isFirst = 0;
var rTmp = 0;
var maxRotate = 15;

$(document).ready(function() {
    $("#content").myrotate();
    $("#fire").myrotate();

});

$(document).mousemove(function(e) {
        if (drag == 1) {
            img = selectedImg;
            x1 = e.pageX;
            y1 = e.pageY;
            x = x1 - img.x0;
            y = y1 - img.y0;
            r = 360 - Math.round(((180/Math.PI) * Math.atan2(y,x)));
            rDiff = r - rTmp;
            if(isFirst != 1 && Math.abs(rDiff) < maxRotate) {  
                r = img.rotation + rDiff;
                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.rotation = img.rotation + rDiff;
                $("#1").html("rDiff " + rDiff);
                $("#4").html("tmp r " + r);
                $("#5").html("img rot " + img.rotation);
            } else {
               isFirst = 0;
               // rDiff should be small next time?
            }

            rTmp = r;
        }
});

如果您希望图像能够更快地旋转，请增加 maxRotate 的值。这是一个 fiddle .