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%"]});

It's right there in the documentation.

Answer 2

这不使用jQuery rotate，但你可以在我的版本中设置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);
});

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

请参阅jsFiddle

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

2 个答案: