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));
});
我改變了幾乎所有我喜歡的,但我只是不能改變它降低到顏色,事實上我寧願只是在給代替底部顏色的值。
這就是我得到so far
我的主要問題:我的設計中使用正確的顏色依舊沒有人知道如何改劇本,所以我可以只給一個「從」和「到」顏色或東西梯度?