jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了图像旋转和缩放的jquery问题大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试向网页添加功能,允许用户旋转和放大图像.我发现了许多允许缩放的 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');

});

我正在使用的zoom / pan插件来自这里:

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

解决方法

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

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

您的.rotate90left附带的CSS样式将被inlinestyle覆盖.

一个解决方案:旋转包装器,而不是图像本身……

大佬总结

以上是大佬教程为你收集整理的图像旋转和缩放的jquery问题全部内容,希望文章能够帮你解决图像旋转和缩放的jquery问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。