2013-08-31 25 views
1

我正在一個網站上工作,我的設計師想要有一個移動 equaulizer頭,因爲該網站是音樂相關。我搜索了現有的插件,最終picking this onejquery均衡器效果改變代碼,以不降低顏色

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

}); 

我改變了幾乎所有我喜歡的,但我只是不能改變它降低到顏色,事實上我寧願只是在給代替底部顏色的值。

enter image description here

這就是我得到so far

我的主要問題:我的設計中使用正確的顏色依舊沒有人知道如何改劇本,所以我可以只給一個「從」和「到」顏色或東西梯度?

回答