Rumah > Artikel > hujung hadapan web > Atitit.随时间变色特效?-包厢管理系统的规划_html/css_WEB-ITnose
Atitit.随时间变色特效 ---包厢管理系统的规划
1 流程滴定仪
定义的参数 颜色、位置(开始值,结束值,当前比值) 》》返回数值
可以后期处理转成双位16进制码
分别定义复合颜色的,每个单色数值,然后join
回调事件,要应用的对象。。
2 还需要的功能
暂停功能
统一增加时间功能
统一减少时间
作者:: 老哇的爪子 Attilax 艾龙, EMAIL:1466519819@qq.com
3 Overview图片如下
4 ---code
function getCurVal(startVal,endVal,percent)
{
var rang= Math.abs( startVal-endVal);
var adjus_count= Math.round ( percent*rang);
if(startVal>endVal) //reduce
var cur_val=startVal-adjus_count;
else //up load
var cur_val=startVal+adjus_count;
return cur_val;
}
5 ---code22
var min_color=121;
var max_color=240;
var finish_percent=past_time/dura;
var remain_prercent=remain_time/dura;
//sec color
var finishi_color_oct= Math.round (finish_percent*5);
var finishi_color_hex=str_pad(finishi_color_oct.toString(16),2,"0",STR_PAD_LEFT );
//fist cloor
var rang=max_color-min_color;
var adjus_count= Math.round ( remain_prercent*rang);
var remain_color_ocr=121+adjus_count;
var remain_color_hex=str_pad(remain_color_ocr.toString(16) ,2,"0",STR_PAD_LEFT );
// finishi_color_hex="00";
var blue_str="#"+finishi_color_hex+remain_color_hex+"00";
if(remain_time>0){
$(element).css("background-image","none");
$(element).css("background-color",blue_str);
}