javascript - 旋转时如何将图像保持在原始位置

Question

我的 HTML 文档中有一张图片：

<img id="img1" src="C:\Html\img1.jpg" alt="my-image" width="150" height="150" Style="position:relative;left:600;top:45;"`>

我希望此图像在单击按钮时旋转，我可以这样做，但图像正在从其位置移动到默认位置。

function Test() {
    var angle = 0;
    setInterval(function(){
        angle+=3;
        $("#img1").rotate(angle);
    }, 50);
}

我希望图像位于首次加载的位置。

Answer 1

使用该插件时，您可以传入“中心”。

$("#img1").rotate({angle: angle, center: ["50%", "50%"]});

它就在文档中。

Answer 2

这不使用 jQuery 旋转，但您可以transform-origin在我的版本中设置属性：

$('#img1').click(function () {
    'use strict';

    var $this = $(this),
        angle = 0,
        v;

    setInterval(function () {
        angle += 3;
        v = "rotate(" + angle + "deg)"

        $this.css({
            '-webkit-transform': v,
            '-moz-transform': v,
            '-ms-transform': v,
            transform: v
        });
    }, 50);
});

当然，您不必为 target this，因为在您的情况下您将使用#img1并且事件处理程序将位于button.

见jsFiddle