Jquery均衡器会将代码更改为不降低颜色。

Question

我目前正在一个网站上工作，我的设计师希望在标题中有一个移动均衡器，因为该站点与音乐有关。我搜索了一个现有的插件，最后得到了选这个。

// ________________ settings ______________________

    var base_color_red = 50;
    var base_color_green = 255;
    var base_color_blue = 102;

    var color_degrading_degree = -25;

    var n_bars = 9;
    var n_components_per_bar = 7;

    var bar_margin = 5;

    var bar_component_margin = 1; 

    var frequency = 7;  // the frequency of the equalizer, don't set a value above 20 or you'll consume a high CPU
    var refresh_time = 75;  // the refresh time for the equalizer

    var music = false;  // enable / disable music

    // ________________________________________________





$(document).ready(function() {

    var equalizer = $("#equalizer");

    // ______________________ do not change this values, change the setting above instead _____________________

    var width = equalizer.width();
    var height = equalizer.height();
    var bar_width = (width / n_bars) - bar_margin*2;
    var bar_component_height = (height / n_components_per_bar) - bar_component_margin*2;

    // ________________________________________________________________________________________________________

    for(var i=0;i<n_bars;i++)
    {
        equalizer.append("<div class='equalizer_bar'></div>");

    }


    $("#equalizer audio").fadeOut();

    equalizer.hover(function(){
        $("#equalizer audio").fadeIn(400);
    },function(){
        $("#equalizer audio").fadeOut(400);
    });

    var i = 0;

    $(".equalizer_bar").each(function(index) {

      for( var j=0;j<n_components_per_bar;j++)
      {  

           $(this).append("<div class='equalizer_bar_component' id='bar_"+i+"_component_"+j+"'></div>");

      }

      $(".equalizer_bar_component",this).reverseOrder();

      i++;
    });

    function apply_colors()
    {
        var i = 0;
        $(".equalizer_bar").each(function(index) {
           for( var j=0;j<n_components_per_bar;j++)
           {            
               $("#bar_"+i+"_component_"+j).css("backgroundColor","rgb("+(base_color_red + color_degrading_degree*(n_components_per_bar - j))+","+(base_color_green + color_degrading_degree*(n_components_per_bar - j))+","+(base_color_blue + color_degrading_degree*(n_components_per_bar - j))+")");
           }

            i++;

        });
    }

    apply_colors();

    $(".equalizer_bar").css("width",bar_width+"px");
    $(".equalizer_bar").css("margin","0px " + bar_margin +"px");

    $(".equalizer_bar_component").css("height",bar_component_height+"px");
    $(".equalizer_bar_component").css("margin",bar_component_margin+"px 0px");


    function activate_equalizer()
    {
        if(music == true && $("#equalizer audio").get(0).paused == false)
        {
            var i = Math.floor((Math.random()*n_bars)); 
            var j = Math.floor((Math.random()*n_components_per_bar)+1); 

            for(var k=j;k<n_components_per_bar;k++)
            $("#bar_"+i+"_component_"+k).css("backgroundColor","transparent");
        }
        else
        {
            if(music == false)
            {
                var i = Math.floor((Math.random()*n_bars)); 
                var j = Math.floor((Math.random()*n_components_per_bar)+1); 

                for(var k=j;k<n_components_per_bar;k++)
                $("#bar_"+i+"_component_"+k).css("backgroundColor","transparent");
            }
        }
    }


    for(var i=0;i<frequency;i++)
    setInterval(activate_equalizer,refresh_time);


    setInterval(apply_colors,refresh_time*(frequency+1));

});

我几乎改变了我喜欢的一切，但我只能改变它退化到的颜色，事实上，我宁愿只给出底部颜色的价值。我的设计师坚持使用正确的颜色：

​

​

这就是我得到的到目前为止

我的主要问题是:有没有人知道如何修改脚本，这样我就可以给出“从”和“到”颜色或类似渐变的东西？

Answer 1

我刚收到开发商的答复！他很聪明！

你好

谢谢你的反馈:)

我更新了均衡器，现在它支持双重降级颜色。

这里是演示http://bestofjqueryplugins.com/demo/jquery-music-equalizer/

这是http://bestofjqueryplugins.com/plugins.php?name=jquery-music-equalizer的文章

源代码非常容易使用，我不需要解释，只需编辑params

尽情享受