Question

所以这是我的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>

Answer 1

您可以使用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);
        });

    }

Answer 2

你在这里重复了很多，而不是使用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');
});

Answer 3

为什么不直接在数组中设置文件名，然后使用jQuery 淡入淡出？

如何淡出原始图片然后淡入不同的图片？

3 个答案: