1

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

// ________________ 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));

});

我根据自己的喜好更改了几乎所有内容，但我不能更改它降级的颜色，事实上，我宁愿只给出底部颜色的值。我的设计师坚持使用正确的颜色：

在此处输入图像描述

这就是我到目前为止所要做的

我的主要问题：有谁知道如何更改脚本，以便我可以只给出“从”和“到”颜色或类似渐变的颜色？

4

1 回答 1

1

刚刚收到开发者的回复！他很聪明！

你好

感谢您的反馈 ：）

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

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

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

源码真的好用，不用我解释，直接编辑params

享受

于 2013-08-31T16:40:02.090 回答