11

Jquery Rotateを使用して画像をメートルの周りで回転させていますが、これはうまく機能しますが、IE7およびIE8では、約200ピクセル押し上げられ、画像の周囲に黒いストローク/境界線があります。

私はそれが機能しているjQueryRotate3.jsを使用していますが、位置がずれていて、黒い境界線がどこから来ているのかわかりませんか？

JS：

            var start = 0;
        // Sets the Value of the City for now   
            var angle = 1 + Math.floor(Math.random() * 180);

            $("img.pointer").rotate({
                 angle: start,
                 animateTo: angle,
                 easing: $.easing.easeInOutSine
            })

HTML：

<div class="city-details">
   <div class="details">
     <img class="pointer" src="http://demo.omnigon.com/christian_bovine/shamelesscity/images/pointer.png" alt="" />
    </div>
</div>​

あなたはここでコードを見ることができます：http：//jsfiddle.net/xtian/6gcS8/1/

IE7とIE8でこれを機能させたいと思っています。

4

3 に答える 3

5

jsFiddle デモ

あなたが使用しているjQuery Rotate v3.1スクリプトを調べたところ、IE での作業を完了するために必要な最小限のものしかないまばらなものでした。

との値に基づいて、topとの 2 つの CSS ルールを含めるだけで、 CSS3 以外の IE シリーズのブラウザーで動作させることができます。leftmargin-topmargin-left

例：

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    top: 211px;
    left: 48px;    
    margin: 211px 0 0 48px;
}

CSS を設定する必要がないことに注意してください。positionこのスクリプトは、指定したabsoluteものをオーバーライドする CSS を設定するためです。

IE ブラウザーで画像の黒い境界線の問題を修正する方法は、background-colorプロパティを背景に一致する値に設定することです...あなたの場合、中央のセクションに白と一緒に青の 3 色があることを期待してください...そうではありません良い考えです。

PNG8 Filetype Image with Transparency代わりに、このSO Answerで説明されているように、最も一般的なソリューションを使用してください。

于 2012-12-09T11:29:49.980 に答える
0

マージンを削除し、次のような相対位置で配置を設定することで、なんとか機能させることができました。

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    margin: 211px 0 0 48px;
}

に

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    position: relative;
    top: 218px;
    left: 50px;
}

私はie7/8をインストールしていませんが、これはIE9互換表示設定で機能します。これは、元のフィドルで針が間違って配置されていることを示しています（ChromeとFirefoxでも期待どおりに動作します）。

この更新されたフィドルを試して、まだ問題がある場合はお知らせください：http: //jsfiddle.net/6gcS8/4/

于 2012-12-07T23:07:00.677 に答える
0

IE7/8 で回転やフェードなどを行うと、ブラウザの標準機能を超えているため、常に望ましくない副作用が発生する可能性があります。他のすべてのブラウザーでは非常に簡単ですが、古い IE では、jQuery プラグインが機能させるためにかなりハックなことを行う必要があります。このハッキーなものは場合によっては機能するかもしれませんが、非常にもろくて簡単に壊れてしまう傾向があります。

IE のローテーション メカニズムは非常に扱いにくいものです。説明されている画像が 200 ピクセル上に移動するという問題は、回転の中心点が正しくないように聞こえます。これは、IE で回転を操作しようとしたときによく遭遇するものです。あなたのjQueryプラグインがそれを透過的に処理することを期待していましたが、それが間違っている場合、プラグインを完全にバイパスするか、IE用に200ピクセル高いか何かの別の画像を使用せずに修正する方法がわかりませんそのように。

黒い境界線については、PNG 画像のアルファ チャネルの処理に問題がある可能性があります。代わりに GIF 画像を使用してこれを確認することもできます (見栄えはよくありませんが)。

しかし全体として、私の主な推奨事項は、古い IE でこの種のことを完全に行うことを避けることです。問題が多すぎて、努力する価値がありません。

jsFiddle の例を見ると、速度計タイプのゲージを描画してアニメーション化するためにこれを行っているようです。

DOM 要素のローテーションを完全にいじる必要をなくす別のアプローチを提案できますか。

ベクター グラフィックスを描画するRaphaelという Javascript ライブラリがあります。古い IE バージョンを含むすべてのブラウザーで動作します。Raphael を使用して見栄えの良いスピード ゲージを描くのは非常に簡単です。実際、まさにそれを行うために、SOに関する別の回答で4行のJSスクリプトを提供しました。こちらを参照してください:ハーフ ゲージ/スピードメーターの描画 (JavaScript キャンバスまたは Java Swing の例が必要)。そのスクリプトを使用して、既存のゲージの背景画像を使用するように変更し、すべてのブラウザーで動作するスピード ゲージであるビンゴを使用することができます。

それが役立つことを願っています。

于 2012-12-07T23:14:33.933 に答える