Question

我有一系列颜色，我需要通过一组元素“旅行”，以创造视觉效果。我努力使逻辑正确。

我有X个颜色，比如["red", "blue", "yellow", "green"]。它们需要在Y <div>个元素中循环。每interval，颜色将从一个<div>转换为保留变量，或从保持变量转换为下一个<div>行。

Visual to explain how color travels

Answer 1

你可以使用pop和unshift从数组后面获取元素并将它们注入前面。

var colours=["red", "blue", "yellow", "green"];

function mifunc(){    
    var element=colours.pop();
    colours.unshift(element);
}

现在使用setInterval来调用myfunc并在每次调用时按顺序绘制数组。

不是一个完整的解决方案，但可以帮助你。

Answer 2

这是一份工作样本。随意重复使用/调整：

    <html>
    <head>
        <style type="text/css">
            .color { height: 100px; width: 100px; float: left; margin-right: 5px; }
            .red { background-color: red; }
            .blue { background-color: blue; }
            .yellow { background-color: yellow; }
            .green { background-color: green; }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            var code = {
                hiddenIndex : -1,
                showAll : function () { 
                    $(".red").css("background-color","red");
                    $(".blue").css("background-color","blue");
                    $(".yellow").css("background-color","yellow");
                    $(".green").css("background-color","green");
                },
                hideOne : function (cssRef) { 
                    code.showAll();
                    $(cssRef).css("background-color","white");
                },
                animate : function () { 
                    switch(code.hiddenIndex) {
                        case -1:
                            code.showAll();
                            break;
                        case 0:
                            code.hideOne(".red");
                            break;
                        case 1:
                            code.hideOne(".blue");
                            break;
                        case 2:
                            code.hideOne(".yellow");
                            break;
                        case 3:
                            code.hideOne(".green");
                            break;
                    }
                    code.hiddenIndex++;
                    if (code.hiddenIndex > 3) code.hiddenIndex = -1;
                }
            };
            (function () { 
                window.setInterval(function () { code.animate(); }, 200);
            })();
        </script>
    </head>
    <body>
        <div class="colors">
            <div class="red color"></div>
            <div class="blue color"></div>
            <div class="yellow color"></div>
            <div class="green color"></div>
        </div>
    </body>
</html>

Answer 3

BONUS：KnightRider式振荡动作（否则相同代码）：

    <html>
    <head>
        <style type="text/css">
            .color { height: 100px; width: 100px; float: left; margin-right: 5px; }
            .red { background-color: red; }
            .blue { background-color: blue; }
            .yellow { background-color: yellow; }
            .green { background-color: green; }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            var code = {
                hiddenIndex : -1,
                direction: 1,
                showAll : function () { 
                    $(".red").css("background-color","red");
                    $(".blue").css("background-color","blue");
                    $(".yellow").css("background-color","yellow");
                    $(".green").css("background-color","green");
                },
                hideOne : function (cssRef) { 
                    code.showAll();
                    $(cssRef).css("background-color","white");
                },
                animate : function () { 
                    switch(code.hiddenIndex) {
                        case -1:
                            code.showAll();
                            break;
                        case 0:
                            code.hideOne(".red");
                            break;
                        case 1:
                            code.hideOne(".blue");
                            break;
                        case 2:
                            code.hideOne(".yellow");
                            break;
                        case 3:
                            code.hideOne(".green");
                            break;
                        case 4:
                            code.showAll();
                            break;
                    }
                    code.hiddenIndex = code.hiddenIndex + code.direction;
                    if (code.hiddenIndex > 3 || code.hiddenIndex < 0) code.direction = code.direction * -1;
                }
            };
            (function () { 
                window.setInterval(function () { code.animate(); }, 200);
            })();
        </script>
    </head>
    <body>
        <div class="colors">
            <div class="red color"></div>
            <div class="blue color"></div>
            <div class="yellow color"></div>
            <div class="green color"></div>
        </div>
    </body>
</html>

Answer 4

4种颜色“旅行”超过3个div

    <html>
    <head>
        <style type="text/css">
            .color { height: 100px; width: 100px; float: left; margin-right: 5px; }
            .red { background-color: red; }
            .blue { background-color: blue; }
            .yellow { background-color: yellow; }
            .green { background-color: green; }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            var code = {
                firstPass : 1,
                colorOptions : ["red", "blue", "yellow", "green"], 
                shift : function () { // borrowed from ojovirtual
                    var c = code.colorOptions.pop();
                    code.colorOptions.unshift(c);
                },
                animate : function () { 
                    if (code.firstPass === 0) { // do not call on first pass through of code
                        $("#div1").removeClass(code.colorOptions[0]);
                        $("#div2").removeClass(code.colorOptions[1]);
                        $("#div3").removeClass(code.colorOptions[2]);
                        code.shift();
                    }
                    $("#div1").addClass(code.colorOptions[0]);
                    $("#div2").addClass(code.colorOptions[1]);
                    $("#div3").addClass(code.colorOptions[2]);

                    code.firstPass = 0; // indicate first pass is complete. 
                }
            };
            (function () { 
                window.setInterval(function () { code.animate(); }, 200);
            })();
        </script>
    </head>
    <body>
        <div class="colors">
            <div id="div1" class="color"></div>
            <div id="div2" class="color"></div>
            <div id="div3" class="color"></div>
        </div>
    </body>
</html>

在JavaScript中连续循环遍历数组

4 个答案: