Вопрос по background-position, firefox, css, javascript, animation – backgroundPositionX не работает в Firefox

38

У меня есть игра с YouTubeСпрайтовая анимация, но есть проблема.backgroundPositionX победил'работает под Firefox (но работает на Chrome и IE8) ... Это код:https://jsfiddle.net/74RZb/

Дополнительная информация: проблема в том, что под firefoxизменить фоновое положение (выиграноне воспроизводить анимацию) ... ошибок нет, просто нетизменить положение фона.

Ваш Ответ

6   ответов
1

Используя как это:

background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie
При ответе на вопросы, пожалуйста, предоставьте объяснение, чтобы другие пользователи сайта могли его легче понять. Tristan
благодарю вас. Я просто присоединился к этому сайту вчера. Minh Khiêm Nguyễn
3

background-position: 0 центр;

60

но он поддерживаетфоновая позиция

Таким образом, мы можем сделать что-то вроде этого:

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

Это устанавливает положение фона, сначала X, затем Y.

Рабочий примерВот

@Анди Да, ты прав. Я также голосую за ваш ответ. Холод .. Я попробовал вашу формулу, но она работает медленно. Таким образом, я изменил 60 с 30. Хорошего дня. Sandeep Pattanaik
Спасибо, я нажму "принятый ответ " кнопка раз в стеке переполняет меня :) T1000
но не работает для анимации jquery css :-( appsthatmatter
Это правильно, но посмотрите на мой ответ, он работает нормально из вашего ответа. Ваш код работает медленно. Sandeep Pattanaik
2

Это сработало для меня.NX это количество пикселей по оси X иNY по оси Y.

background-position: calc(NXpx) NYpx;
0

вам просто нужно указать фиксированную позицию 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);
            }
        }
    }  
Безразлично»не работает, даже если вы установили background-position-y в CSS Max
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

ура

Похожие вопросы