jQuery问题：图像旋转和缩放

Question

jQuery问题：图像旋转和缩放

5

我正在尝试为网页添加功能，允许用户旋转和缩放图像。我找到了许多允许缩放的jquery插件，但没有一个也能做到旋转。因此，我正在尝试使用一个用于缩放/平移的jquery插件，并结合CSS来处理旋转，但迄今为止没有成功。似乎无论是在添加jquery插件之前还是之后应用CSS，或者将它们链接在一起（同样尝试了在缩放插件之前和之后旋转以进行链接，但没有任何效果）。

参考我的代码如下：

HTML:

<body>
    <script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
    <script src="zoom_assets/jquery.smoothZoom.min.js" type="text/javascript"></script>
    <script src="scripts/PictureViewer_SmoothZoom.js" type="text/javascript"></script>

    <img src="images/leaftemple11680.jpg" id="leafTemple" />
</body>

CSS:

.rotate90Left{
    /* for firefox, safari, chrome, etc. */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    /* for ie */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

JavaScript:

//jquery chain - add CSS second
$(document).ready(function(){

    $('#leafTemple').smoothZoom({
        width: 480,
        height: 360
    }).addClass('rotate90Left');

});

我使用的缩放/平移插件来自这里： http://codecanyon.net/item/smooth-zoom-pan-jquery-image-viewer/511142

- Scot

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- michelgotta · Accepted Answer

问题是，SmoothZoom使用-webkit-transform 来对图片进行缩放，并将数据作为内联样式放置在图像上，如下所示：

<img style="-webkit-transform: translate3d(0px, 0px, 0px) scale(0.46875);" />

您的.rotate90left CSS样式将被内联样式覆盖。

一个解决方案：旋转包装器，而不是图像本身...