Как я могу затемнить оригинальную картинку, а затем исчезнуть на другой?

0

Итак, это мои коды Javascript, и в основном это то, что он делает, это изменение изображения на другое изображение в зависимости от того, какой цвет хочет пользователь или какое изображение (Panda или Dj) хочет пользователь.

Что я добавлю, чтобы сделать старую картинку затухающей и новая картина затухает?

мой html может переключить изображения отлично, я просто понятия не имею, как добавить классный эффект.

<script type="text/javascript">
    function O(obj)
    {
        if (typeof obj == 'object') 
            return obj;
        else 
            return document.getElementById(obj) 
    }

    var head = "Dj"
    var headcolor = "pink"


        function headpink(){headcolor = "pink"; changehead();}
        function headblue(){headcolor = "blue"; changehead();}
        function headdefault(){headcolor = "default"; changehead();}
        function headred(){headcolor = "red"; changehead();}


        function DjHead(){head = "Dj"; changehead();}
        function PandaHead(){head = "Panda"; changehead();}


    function changehead()
        {
        if (head == "Dj")
            {
                if(headcolor == "pink"){headImagePath = 'head/DjPink.png';}
                if(headcolor == "blue"){headImagePath = 'head/DjBlue.png';}
                if(headcolor == "red"){headImagePath = 'head/DjRed.png';}
                if(headcolor == "default"){headImagePath = 'head/DjDefault.png';}
            }
        if (head == "Panda")
            {
                if(headcolor == "pink"){headImagePath = 'head/PandaPink.png';}
                if(headcolor == "blue"){headImagePath = 'head/PandaBlue.png';}
                if(headcolor == "red"){headImagePath = 'head/PandaRed.png';}
                if(headcolor == "default"){headImagePath = 'head/PandaDefault.png';}
            }

                O("head").src = headImagePath;
        }
        </script>
  • 0
    Вы действительно должны подумать об использовании if / else if оператора или switch case
  • 0
    Рассматривали ли вы использовать CSS-переходы?
Показать ещё 1 комментарий
Теги:

3 ответа

0
Лучший ответ

Вы можете использовать jQuery fadeIn и fadeOut; эта функция позволяет вам отображать/скрывать элементы с эффектом

Пожалуйста, вместо некоторых аналогичных, если, рассмотрите использование оператора switch.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Код (не проверен):

function O(obj) {
    if (typeof obj == 'object') return obj;
    else return document.getElementById(obj)
}

var head = "Dj"
var headcolor = "pink"
var headImagePath;


    function headpink() {
        headcolor = "pink";
        changehead();
    }

    function headblue() {
        headcolor = "blue";
        changehead();
    }

    function headdefault() {
        headcolor = "default";
        changehead();
    }

    function headred() {
        headcolor = "red";
        changehead();
    }


    function DjHead() {
        head = "Dj";
        changehead();
    }

    function PandaHead() {
        head = "Panda";
        changehead();
    }


    function changehead() {
        switch (head) {
            case "Dj":
                switch (headcolor) {
                    case "pink":
                        headImagePath = 'head/DjPink.png';
                        break
                    case "blue":
                        headImagePath = 'head/DjBlue.png';
                        break
                    case "red":
                        headImagePath = 'head/DjRed.png';
                        break
                    case "default":
                        headImagePath = 'head/DjDefault.png';
                        break
                }
                break;
            case "Panda":
                switch (headcolor) {
                    case "pink":
                        headImagePath = 'head/PandaPink.png';
                        break
                    case "blue":
                        headImagePath = 'head/PandaBlue.png';
                        break
                    case "red":
                        headImagePath = 'head/PandaRed.png';
                        break
                    case "default":
                        headImagePath = 'head/PandaDefault.png';
                        break
                }
                break
        }

        $(O("head")).fadeOut(700, function () {
            $(this).attr('src', headImagePath).fadeIn(700);
        });

    }
Поделиться
  • 0
    все ваши головы * функции должны быть реорганизованы, чтобы использовать только одну функцию IMHO
  • 0
    Спасибо за помощь, но есть одна проблема, если вы все еще можете помочь мне. Это то, что изображение исчезает, что здорово, но новое изображение не исчезает. Внезапно пространство просто становится пустым.
0

Почему бы просто не задать имена файлов в массиве, а затем использовать jQuery для постепенного вытеснения?

Поделиться
0

Вы много повторяете здесь, а не используете jQuery.

Почему бы просто не сохранить параметры в объекте, как это:

var options = {
  head: ['Panda', 'Default']
};

Тогда вы можете просто сделать:

var $head = $('#head');

var getHeadImage = function(){
  return '/head/' + options.head.join('') + '.png';
};

$head.fadeOut('slow', function(){
  $head.attr('src', getHeadImage).fadeIn('slow');
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню