图像旋转和缩放的jquery问题_Jquery_Image_Image Rotation_Zooming

图像旋转和缩放的jquery问题

jquery image

图像旋转和缩放的jquery问题,jquery,image,image-rotation,zooming,Jquery,Image,Image Rotation,Zooming,我正在尝试向网页添加功能，允许用户旋转和放大图像。我发现了许多允许缩放的jquery插件。但没有一个也做旋转。因此，我尝试使用jquery插件进行缩放/平移，并结合CSS处理旋转，但迄今为止没有成功。在添加jquery插件之前还是之后应用CSS似乎并不重要。或者将它们链接在一起（同样，尝试在缩放插件之前和之后旋转以进行链接，但似乎没有任何效果）作为参考，我的代码如下： HTML: <body> <script src="scripts/jquery-1.6.4.js"

我正在尝试向网页添加功能，允许用户旋转和放大图像。我发现了许多允许缩放的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>

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

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

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

});

JavaScript:

<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>

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

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

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

});

我使用的缩放/平移插件如下：

问题是，SmoothZoom使用

-webkit transform

放大图片，并将数据作为内联样式放在图像上，如下所示：

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

.rotate90left

附带的CSS样式将被inlinestyle覆盖

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

你的意思是在图像周围放置一个div标记，然后使用

.rotate90Left

CSS类吗？这是修复此问题的一种方法。围绕它缠绕一个div并旋转它。因此，它应该将内容旋转到。或者你必须调整jQuery插件…好的。。。如此接近。。。我删除了将类直接添加到图像中的操作，并使用了一个div，如：

$（'rotateMe'）.addClass（'rotate90Left'）

。这在很大程度上起了作用。唯一的问题是，作为插件一部分的按钮也会旋转。我想如果需要的话，我可能可以解决这个问题，但是如果你有任何想法如何让按钮保持在原来的位置，我会洗耳恭听。非常感谢！