Javascript backgroundPositionX在Firefox上不工作

我玩过youtube的精灵动画，但有个问题

backgroundPositionX

在Firefox下不工作（但在Chrome和IE8上工作）。。。 代码如下：

---

额外信息：问题是在firefox下它不会改变背景位置（不会播放动画）。。。没有错误，只是不更改背景位置。

Firefox不支持backgroundPositionX，但它支持backgroundPositionX

所以我们可以这样做：

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

background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie

这将设置背景位置，先设置X，然后设置Y

---

工作示例

这对我很有用

NX

是X轴和Y轴的像素数

background-position: calc(NXpx) NYpx;

---

Background position-x可以在firefox中工作，您只需指定一个固定的Background-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);
            }
        }
    }  

---

你可以这样做

首先安装jquery迁移

在html中包含这些内容

$.browser属性允许您将样式应用到目标浏览器中

在这种情况下，背景位置可以更改为属性支持的背景位置

可用标志为-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

---

干杯

这适用于IE、FF和chrome：

背景位置：0中心

像这样使用：

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

background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie

---

谢谢，一旦stackoverflow看到我，我会点击“接受答案”按钮：）是的，但是看看我的答案，从你的答案来看，它工作得很好。你的代码运行缓慢。@Andy是的，你是对的。我也赞成你的答案。寒冷我试过你的配方，但效果很慢。所以我把它改成60到30。祝你有一个愉快的一天。即使你在CSW中设置了background-position-y也不起作用。回答问题时，请提供解释，以便网站的其他用户更容易理解。