38

YouTubeのスプライトアニメーションで遊んだことがありますが、問題があります。backgroundPositionXFirefoxでは動作しません（ただし、ChromeとIE8では動作します）...これはコードです：https ：//jsfiddle.net/74RZb/

追加情報：問題は、Firefoxの下では背景の位置が変更されない（アニメーションが再生されない）ことです...エラーはなく、背景の位置が変更されないだけです。

4

6 に答える 6

60

FirefoxはbackgroundPositionXをサポートしていませんが、バックグラウンド位置はサポートしています

したがって、次のようなことができます。

psy.style.backgroundPosition = x+'px 0';

これにより、背景位置が設定されます。最初にX、次にYです。

ここでの実例

于 2012-12-19T09:02:02.223 に答える
3

これはIE、FF、およびchromeで機能します。

背景位置：0中央;

于 2015-07-02T00:53:44.917 に答える
2

これは私のために働いた。NXは軸XとNY軸Yのピクセル数です。

background-position: calc(NXpx) NYpx;
于 2013-04-11T21:41:36.100 に答える
1

このように使用する：

background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie
于 2015-12-21T04:24:45.987 に答える
0

背景の位置-xはFirefoxで機能し、固定の背景-yの位置を指定するだけです。これは、リボンを左から右に移動するために作成した関数です。最初は、position-x仕様だけでは機能しませんでしたが、IEでは機能しましたがFFでは機能しませんでした。これが私の解決策でした。IEとFFの両方で機能するのは、私のサイトからのコメントを含む実際のコードです。

   //starts ribbon motion at bottom of animation div 
    function startMotion() {
        var ribbonMove = setInterval(function () { ribbonMotion() }, 50);
        var x = 0;
        var cycles = 0;

        function ribbonMotion() {
            //background position moves on the x plane and is fixed at 0 on the y plane (single plane specification does not work in FF)
            document.getElementById("ribbon").style.backgroundPosition = x + "px" + " " + 0 + "px";
            x++;
            if (x == 800 || x==1600 || x==2400 ||x==3200) {
                cycles++;

              //sets number of cycles before motion stops (max 4 cycles)  
            }
            if (cycles == 3) {
                clearInterval(ribbonMove);
            }
        }
    }
于 2013-07-19T21:18:56.497 に答える
0

あなたはこのようなことをすることができます

最初にjqueryの移行をインストールします

https://github.com/jquery/jquery-migrate/#readme

これらをHTMLに含めます

$ .browserプロパティを使用すると、スタイルを適用するブラウザをターゲットにすることができます

この場合、background-positionは、プロパティでサポートされているbackgroundPositionに変更できます。

使用可能なフラグは次のとおりです。-webkit-safari-opera-msie（IEの場合）-mozilla

IEまたはFirefoxの例

if ( $.browser.msie || $.browser.mozilla) {
        $(".element").css('backgroundPosition', position + "px 0");                
}

クローム用

if ( $.browser.webkit) {
        $(".element").css('backgroundPosition', position + "px 0");                
}

私は私の仕事をしましたそしてすべてのIEのために

乾杯

于 2014-12-11T05:30:32.137 に答える