Question

我尝试过同时使用jQueryRotate v2.0和v1.7。但在这两种情况下，旋转后图像都要大一些。我怎么解决这个问题？我正在使用以下代码进行旋转：

var test = 0;
$('#working-area .rotatable').live('click', function(event) {
    test = test + 90;
    $(this).rotate({
        angle: test,
        containment: "working-area"
    });
});

Answer 1

图像在旋转时肯定会占用更大的空间，特别是如果图像是矩形，因为高度和宽度不同。拿一张8x4纸，例如，将它向侧面旋转45度。你会发现纸张现在占据了它以前高度的一半，并且它的前宽度增加了一倍。现在再旋转22.5度，你会发现高度现在增加了3/4。

通常的解决方案是使用图像的高度或宽度制作方形尺寸遏制，以较高者为准，然后在该值上加四分之一以适应旋转时尺寸的变化。

Answer 2

当你创建图像<img src="images/tool_box/1.png" class="rotatable">时，这就是你得到的。

当您点击图片时，您将获得

<span style="display: inline-block; width: 97px; height: 11px;" id="" class="rotatable">
    <canvas width="97" style="position: relative; left: -0.310859px; top: -43.3109px;" height="97"></canvas>
</span>

当然这个插件正在这样做。我帮不了你我建议你做自己的功能并做轮换。

<script src="jquery.js"></script>
<script>
    var imgcss = {"-webkit-transform":"rotate(-90deg)", "-moz-transform" : "rotate(-90deg)" };
    var imgcss1 = {"-webkit-transform":"rotate(0deg)", "-moz-transform" : "rotate(0deg)" };

    var flag = false;

    $(function ()
    {
        $('#img').live('click', function(event) {           
            if(flag == false){
                $(this).css(imgcss);
                flag = true;
            }
            else{
                $(this).css(imgcss1);
                flag = false;
            }
    });
    })
</script>
<div id="working-area">
    <img src="img.jpg" id="img"/>
</div>

使用jQueryRotate旋转后，图像有点大

2 个答案: