Question

我正在开发网站，现在我必须在各种浏览器上完成这项工作。所以我有这个代码。

<script>    
var colors = new Array(
                [62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]);

            var step = 0;
            //color table indices for: 
            // current color left
            // next color left
            // current color right
            // next color right
            var colorIndices = [0, 1, 2, 3];

            //transition speed
            var gradientSpeed = 0.002;

            function updateGradient() {

                if ($ === undefined) return;

                var c0_0 = colors[colorIndices[0]];
                var c0_1 = colors[colorIndices[1]];
                var c1_0 = colors[colorIndices[2]];
                var c1_1 = colors[colorIndices[3]];

                var istep = 1 - step;
                var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
                var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
                var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
                var color1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";

                var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
                var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
                var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
                var color2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";

                $('#gradient').css({
                    background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))"
                }).css({
                    background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"
                });

                step += gradientSpeed;
                if (step >= 1) {
                    step %= 1;
                    colorIndices[0] = colorIndices[1];
                    colorIndices[2] = colorIndices[3];

                    //pick two new target color indices
                    //do not pick the same as the current one
                    colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
                    colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;

                }
            }

            setInterval(updateGradient, 10);
</script>
<style>
    #gradient {
                width: 100%;
                height: 800px;
                padding: 0px;
                margin: 0px;
            }
</style>
<body id="gradient" style="height:90vh; opacity:0">
</body>

我确实链接了一个jquery min库。 Firefox，Chrome甚至Microsoft Edge，Safari都能正常运行。是IE不支持jquery还是什么？

Answer 1

@pwan你的javascript看起来很好。唯一的问题是vh单位。

尝试在px中为#gradient div提供高度。

请看一下。 http://caniuse.com/#search=vh

Answer 2

您必须在 javascript 中为IE10及以上版本添加 Gradient 支持：

$('#gradient').css({
background: "linear-gradient(to right, " + color1 + " 0%, " + color2 + " 100%)"}).css({
background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))" }).css({ background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"});

对于IE CSS3 规则对于 Gradient 是这样的：

background: linear-gradient(to right, rgb(234, 35, 115) 0%, rgb(255, 31, 115) 100%);

为了更好地理解，这里有Codepen。

就浏览器支持和更好的解释而言，您可以参考此网址

CSS3-gradients

渐变无法在 IE10 下方使用，因为您必须使用替换：

  /* Fallback (could use .jpg/.png alternatively) */
  background-color: red;

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background-image: url(fallback-gradient.svg);

简单的Jquery功能不适用于IE

2 个答案: