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

How to keep image in its original place while rotating

本文关键字：原始 图像 位置 旋转      更新时间：2023-09-26

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

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

使用该插件时，可以传入一个"center"。

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

它就在文档中。

这不使用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

相关文章：