图像旋转和缩放jQuery的问题

我想添加功能的网页，将允许用户旋转和放大图像。我发现了许多允许缩放的jquery插件。尽管如此，也没有任何旋转。所以我试图使用jQuery插件与CSS一起缩放/平移处理旋转，但迄今为止失败。在添加jQuery插件之前或之后应用CSS似乎并不重要。或者将它们链接在一起（再次，试图在链接的缩放插件之前和之后旋转，似乎没有任何工作）。图像旋转和缩放jQuery的问题

参考，我的代码如下：

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

来源

2012-01-13 Scot

的问题是，SmoothZoom使用-webkit-transform放大到画面，并把数据作为一个内嵌式的图像，像这样：

随附 .rotate90left将由inlinestyle覆盖

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

你的CSS样式。

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

来源

2012-01-13 16:57:46 michelgotta

你的意思做的事情就像把一个div标签的图像周围的，并且使用了'.rotate90Left' CSS类？ – Scot 2012-01-13 17:10:45

这是一个方法来解决这个问题。包裹它并旋转它。所以它应该旋转内容。或者你必须调整jQuery插件... – michelgotta 2012-01-13 17:14:22

好吧......太近了......我直接删除了向图片添加类，并使用了一个div，如下所示：'$（'＃rotateMe'）。addClass（' rotate90Left'）'。这大部分工作。唯一的是插件的一部分按钮也旋转。如果需要，我想我可以解决这个问题，但如果你对如何让按钮保持在同一个地方有任何想法，我会全神贯注。万分感谢！ – Scot 2012-01-13 17:39:18

图像旋转和缩放jQuery的问题

回答

相关问题