5

ユーザーが画像を回転およびズームできるようにする機能を Web ページに追加しようとしています。ズームを可能にする多くの jquery プラグインを見つけました。ただし、回転も行うものはありません。そのため、回転を処理する CSS と組み合わせてズーム/パンに jquery プラグインを使用しようとしていますが、これまでのところ失敗しています。jquery プラグインを追加する前に CSS を適用するか、追加した後に 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');

});

私が使用しているズーム/パンプラグインはここからです:

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

4

1 に答える 1

1

問題は、SmoothZoom が-webkit-transform画像を拡大するために使用し、次のようにデータをインライン スタイルとして画像に配置することです。

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

付属の CSS スタイル.rotate90leftは inlinestyle によって上書きされます。

1つの解決策：画像自体ではなく、ラッパーを回転させます...

于 2012-01-13T16:57:46.950 に答える