YouTubeのスプライトアニメーションで遊んでいますが、問題があります。 backgroundPositionX
はFirefoxでは動作しません(ただし、ChromeおよびIE8)では動作します......これはコードです: https://jsfiddle.net/74RZb /
追加情報:問題は、Firefoxでは背景の位置が変更されない(アニメーションが再生されない)ことです。エラーがなく、背景の位置が変更されないだけです。
FirefoxはbackgroundPositionXをサポートしていませんが、 バックグラウンド位置 をサポートしています
したがって、次のようなことができます。
psy.style.backgroundPosition = x+'px 0';
これにより、背景の位置が設定され、Xが最初に、次にYが設定されます。
作業例 こちら
これはIE、FF、およびchromeで機能します。
バックグラウンド位置:0中央;
これは私のために働いた。 NX
はX軸のピクセル数、Y軸のNY
です。
background-position: calc(NXpx) NYpx;
このような使用:
background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie
背景の位置-xは、固定の背景-yの位置を指定するだけでFirefoxで動作します。リボンを左から右に移動するために作成した関数を次に示します。最初は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);
}
}
}
このようなことができます
最初に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のために働いていた
乾杯