Question

我想创建一种效果，当我点击图像元素时，它会旋转其中的内容，但不会旋转元素的宽度和高度（我的图像是400x300）。我想要元素尺寸保持但图像旋转。只要它不旋转元素本身，就可以根据位置压缩图像的高度或宽度。

我尝试过jQueryRotate，但它似乎只是旋转元素，而不是内部的图像。

是否有任何插件或方式让我旋转图像而不旋转元素本身？

修改

我的代码：

$('#rotate-btn').click(function (e) {
    value += 90;
    if (value == 90) {
        var img = document.getElementById('image_canv');
        var width = img.clientWidth;
        var height = img.clientHeight;
        $('#image_canv').height(height);
        $('#image_canv').width(width); {
            animateTo: value
        }
    }
    $('#image_canv').rotate(value);

});
});

它会旋转图像，但元素的位置会移动，所以它不能正常运行。

Answer 1

好的，所以我假设你有一个全局变量定义为value

如果符合您的要求，您可以使用以下代码以90度为增量旋转：

var value = 0;
$('#rotate-btn').click(function (e) {
    var element = $("#image_canv");
    var startDegree = value;
    var endDegree = value + 90;
    value += 90;

    $({ i:startDegree }).animate({ i: endDegree }, {
         step: function(now,fx) {
               element.css({transform : 'rotate('+ now + 'deg)' }); 
         },
         duration: 1000
    });
});

这是一个有效的例子：http://jsfiddle.net/hQHhf/4/

如果您需要按其他增量旋转，则需要稍微更改代码以满足这些需求。但基本上，您的value变量应该始终与endDegree相同，以便下一次旋转将从图像的正确位置开始。

这是一个如何使用它的例子，如果你想要做不同程度的旋转，正面和/或负面（为此，我将rotate-btn的id更改为一个类，并赋予它自己的功能在任何程度上旋转）：

var value = 0;
$('.rotate-btn').click(function (e) {
    doRotate($(this).val(), 1000);
});

function doRotate(degrees, delay) {
    var element = $("#image_canv");
    var startDegree = value;
    var endDegree = value + parseInt(degrees);
    value = value + parseInt(degrees);

    $({ i:startDegree }).animate({ i: endDegree }, {
        step: function(now,fx) {
            element.css({transform : 'rotate('+ now + 'deg)' });
        },
        duration: delay
    }); 
}

这是一个例子：http://jsfiddle.net/hQHhf/6/

还对HTML进行了一些小修改，例如使用<button>代替<input>向doRotate函数发送适当的值以及其他一些小修改。

希望这可以帮助您获得它的要点并将其应用于您的需求。另外，因为你在图像上设置宽度为400，高度为300，而chrome似乎不受此影响，但是其他一些浏览器如firefox也会如此。例如，当图像旋转时，大小会随之旋转，这是因为您在图像的宽度和高度上没有相同的大小，因此它看起来不像在所有浏览器中自然旋转。如果您同时给出宽度和高度两者，则不会出现此问题。

Answer 2

我拍摄身份myimg的图像将其包裹在div中，然后旋转它。

http://jsfiddle.net/D5Sz8/

如果您不希望它们沿图像旋转，请注意应用于图像的所有样式可能需要应用于div。

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};


var i= $('img'), d= document.createElement('div'), rotation=0;
d.id='myimg'; i[0].id='';
i.wrap(d);
$('#myimg').css({'display':'inline-block', 'overflow':'hidden'});
ani();

function ani (){
    i.rotate(++rotation);
    requestAnimationFrame(ani);
}

Answer 3

您可以使用此JavaScript代码，以便轻松旋转图像。但您只需要更改图像目的地。

var looper;
var degrees = 0;
function rotateAnimation(el,speed){

var elem = document.getElementById(el);

if(navigator.userAgent.match("Chrome")){
    elem.style.WebkitTransform = "rotate("+degrees+"deg)";

} else if(navigator.userAgent.match("Firefox")){
    elem.style.MozTransform = "rotate("+degrees+"deg)";

} else if(navigator.userAgent.match("MSIE")){
    elem.style.msTransform = "rotate("+degrees+"deg)";

} else if(navigator.userAgent.match("Opera")){
    elem.style.OTransform = "rotate("+degrees+"deg)";
} else {
    elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
degrees++;
if(degrees > 359){
    degrees = 1;
}
document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}

现在使用图片的HTML代码：

<img id="exe" style='position:absolute;left:450px;height:300px;' src="images/example.png"   alt="exe">

它即将完成添加另一个脚本标记：

rotateAnimation("exe",30);

上面的这个函数将移动图像30deg，你可以将它改为40,50 ...而“exe”是图像的id。

在不旋转元素尺寸的情况下旋转图像

3 个答案: