0

我正在尝试改进一些代码：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;

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

4

3 回答 3

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))); 
});

小提琴

于 2013-03-20T15:24:39.053 回答
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。这是一个小提琴。

于 2013-03-20T16:05:28.017 回答
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 = 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);
}});

我从头再来。

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

小提琴最后的工作

Tnx 感谢 Jacob 和 Coromba 与我一起思考……

于 2013-03-21T11:19:47.380 回答