0

我想创建一个效果，当我单击图像元素时，它会旋转其中的内容，但不会旋转元素的宽度和高度（我的 img 是 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);

});
});

它确实旋转了图像，但是元素的位置移动了，所以它不起作用。

4

3 回答 3

0

我用 id 将图像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);
}
于 2013-11-11T02:05:32.280 回答
0

好的，所以我假设您有一个全局变量定义为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）会受到影响。例如，当图像旋转时，大小也随之旋转，这是因为您的图像的宽度和高度的大小不相等，因此在所有浏览器中它看起来都不会自然旋转。如果你同时给出宽度和高度，相同的尺寸你不会有这个问题。

于 2013-11-11T01:54:28.373 回答
0

您可以使用此 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);

上面的这个函数会将图像移动 30 度，您可以将其更改为 40,50...，“exe”是图像的 id。

于 2013-11-12T12:28:10.747 回答