Question

我正在尝试改进以下代码：http://www.htmldrive.net/items/show/1114/-Rotating-hover-Image-with-JQuery

所以问题是： - 当我单击图像（按住鼠标）时，图像将在开始时旋转。如何停止第一次旋转。

 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;

我正在尝试过滤第一次旋转。为了更好的代码视图，请尝试小提琴。

Answer 1

您应该添加相对于x轴的角度以及用户在旋转开始时单击的点。如果你点击图片的三点钟，你当前的版本工作正常（没有发生任何不受欢迎的旋转）。只需计算此角度并输入以下行：

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

我添加了存储初始角度偏移的rShift变量。看起来有所帮助。

var rShift = 0;
$(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))-rShift);
        rDiff = r - rTmp;
        if(isFirst != 1) {  
            r = img.rotation + rDiff-rShift;
            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;
    }
});

img.mousedown(function(e) {
    selectedImg = img;
    drag = 1;

    x1 = e.pageX;
    y1 = e.pageY;
    x = x1 - img.x0;
    y = y1 - img.y0;
    rShift = Math.round(((180/Math.PI) * Math.atan2(y,x))); 
});

fiddle

Answer 2

您希望限制图像一次可以旋转的最大量。这不会修复初始计算，但它确实增加了最大旋转速度的想法。添加名为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。

Answer 3

最后，我解决了一些问题...

$(document).mousemove(function(e) {
if(drag == 1) { 
        img = selectedImg;
        x1 = e.pageX;
        y1 = e.pageY;
        x = x1 - img.x0;
        y = y1 - img.y0;
        r = 180 - Math.round(((180/Math.PI) * Math.atan2(y,x)));       
        img.rotation = (img.rotation - ((tmpR - r))) ;          
        img.rotation = img.rotation % 360;
        if(img.rotation <= 0)
            img.rotation = 360;

        img.css("transform","rotate(-"+ img.rotation +"deg)");
        img.css("-moz-transform","rotate(-"+ img.rotation +"deg)");
        img.css("-webkit-transform","rotate(-"+ img.rotation +"deg)");
        img.css("-o-transform","rotate(-"+ img.rotation +"deg)");
        tmpR = r;
         $("#1").html("image.rotation -> " + img.rotation);
}});

我从头开始。

改进： - 图像旋转不能为负 - 当您开始拖动时，图像将从上一个位置转动

Fiddle final working

Tnx向Jacob和Coromba跟我思考......

在开始时旋转图像不需要的转动

3 个答案: