javascript - 怎么用js实现渐变切换背景颜色

Question

我的思路是弄一个数组把几种颜色放进去，然后设置一个时间(时间较短)，从数组的第一个颜色快速渐变到数组的第二个颜色，变成第二个颜色后再停留一阵子(时间较长)，再从第二个元素快速渐变到第三个元素，接着就是...

伊谢尔伦 · Answer

循环的话可以用setInterval函数，然后再里面实现颜色切换：

$("body").css('background-color',颜色值);

补充：
其实完全可以用css3的animation实现。

高洛峰 · Answer

setInterval(function(){
                renderColor();
            },50);

});
      </script>

</head>
  <body style="margin:0px;border:0px solid #cccccc;width:100%;height:100%"  >
     <p id="colorp" style="width:100px;height:100px;border:1px solid #cccccc;"></p>

</body>
</html>
</code></pre>

黄舟 · Answer

屎代码，题主将就看吧，望大大狂喷

;(function changeColor() {
        var arr = ['#00CC99', '#00FFFF', '#CCCCFF']
        var t = 2000
        var n = false
        var body = document.querySelector('body')
        body.style.transition = 'background-color 500ms'

        function change() {
            n = !n
            var v = arr.shift()
            body.style.backgroundColor = v
            arr.push(v)
            if(n) {
                setTimeout(change, t)
            } else {
                setTimeout(change, 3*t)
            }
        }

        change()
    })()

直接复制粘贴到console，enter看效果

PHPz · Answer

我重新描述下我理解到你想要的动画过程吧！不对请指出
time0: 颜色1
time1: 维持颜色1
time2: 开始向颜色2渐变（此时任然是颜色1）
time3: 颜色完全由颜色1渐变为颜色2
time4: 维持颜色2
。。。
重复以上过程（颜色可以不止2种）
其中 time1 － time0 是颜色维持的时间(较长)
time2 ＝ time1
time3 － time2 是颜色渐变的过渡时间(较短)
time4 － time3 ＝ time1 － time0

如果上述描述的过程是题主的意思，请往下看，否则可以忽略了
这个东西可以用纯css实现，也可以css结合js实现

纯css实现使用css3的animate ＋ keyframe来实现，不多做介绍

css＋js实现：

css部分

cssselector {
    transition: background-color (time3-time2) 过渡的函数;
    /* 其它样式 */
}

js部分

以下的$element是这个元素的jquery实例

javascriptvar color_array = [color1, color2, color3, color4];//你说的颜色数组
var current_color_index = 0;
var duration = time3 - time0; //颜色的维持时间 ＋ 颜色的过渡时间

function colorChange() {
    //将颜色更改，然后css会执行渐变的过程
    $element.css('background-color', color_array[current_color_index]);
    //确保在颜色数组内循环变化
    current_color_index = (current_color_index + 1) % color_array.length;
    //定时改变颜色，可以将这个动作放到外部通过setInterval来循环，就这个例子来说，他们之间没太大区别。
    setTimeout(arguments.callee, duration);
}

colorChange();

阿神 · Answer

正好我以前写过一个这个，是你要的东西吗？

http://codepen.io/fishenal/pen/LhHsg

PHP中文网 · Answer

以前写的，仅供参考啊。
http://www.cnblogs.com/zjfree/archive/2011/10/20/2219071.html
http://www.cnblogs.com/zjfree/archive/2011/10/20/2219044.html

大家讲道理 · Answer




    
    Document