Sco*_*cot 5 jquery image image-rotation image-zoom
我正在尝试向网页添加功能,允许用户旋转和放大图像.我发现了许多允许缩放的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);" />
你自带的 CSS 样式.rotate90left将会被 inlinestyle 覆盖。
一种解决方案：旋转包装纸，而不是图像本身......
| 归档时间： |
|
| 查看次数： |
4086 次 |
| 最近记录： |