文章/答案/技术大牛

发布

社区首页 >问答首页 >图像旋转和缩放的jquery问题

问图像旋转和缩放的jquery问题
EN

Stack Overflow用户

提问于 2012-01-13 16:42:05

回答 1查看 4.7K关注 0票数 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');

});

我使用的变焦/pan插件来自这里：

http://codecanyon.net/item/smooth-zoom-pan-jquery-image-viewer/511142

jquery

image

image-rotation

zooming

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-01-13 16:57:46

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

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

您的CSS样式，随您的.rotate90left将被覆盖的内联风格。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8854051

复制

相似问题

问图像旋转和缩放的jquery问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像旋转和缩放的jquery问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图像旋转和缩放的jquery问题
EN