Вот обещанный код на скорую руку. Писал больше как пример, лучше перепиши сам.
| Код | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<script language="Javascript" type="text/javascript">
<!--
var REMOVE_ME=0; //значение "удали меня"
var minCPU_Resolution=50; //время в милисекундах между вызовами функции
/*
Используем хештаблицы(быстрее) для поиска уже существующих обьектов
в очереди. Для этого пришлось добавить в тег ID. Если это напрягает
то делай простой массив с перебором(медленно)
*/
function fade_me(obj_id,from_c,to_c,steps) {
var obj=document.getElementById(obj_id);
if(!obj) return;
if(typeof(IntervalHandler.targets["~"+obj_id])=='object') //существует
IntervalHandler.targets["~"+obj_id].init_color(from_c, to_c, steps);
else { //нет, создадим новый
IntervalHandler.targets["~"+obj_id]=new ColorFader(obj, from_c, to_c, steps);
IntervalHandler.len++;
}
//таймер не запущен? сапустим
if(IntervalHandler.timer==null) IntervalHandler.timer=window.setInterval(IntervalHandler, minCPU_Resolution);
}
//обьект меняющий цвет тега
function ColorFader(target, fc, tc, st)/*extends ActiveQueueItem*/ {
this.target=target;
this.init_color=function(from, to, steps) {
var rgb=from==null? [this.r, this.g, this.b]: getRGB(from);
var rgb2=getRGB(to);
this.steps=Math.abs(steps==null? this.bsteps-this.steps: steps); //Math.abs
this.bsteps=steps;
this.steps=this.steps==0? 1: this.steps;
this.ra=(rgb2[0]-rgb[0])/this.steps;
this.r=rgb[0];
this.ga=(rgb2[1]-rgb[1])/this.steps;
this.g=rgb[1];
this.ba=(rgb2[2]-rgb[2])/this.steps;
this.b=rgb[2];
this.endcolor=to; //control shot
};
this.init_color(fc,tc,st);
this.do_it=function() {
if(--this.steps>=0) {
this.target.style.color="#"+to_hex(this.r+=this.ra)+to_hex(this.g+=this.ga)+to_hex(this.b+=this.ba);
this.target.innerHTML="Test: "+this.steps;
return 1;
} else {this.target.style.color=this.endcolor; return REMOVE_ME; }
};// END OF function
}
/*
Далее реализация очереди. В нее можно положит любой обьект содержащий
функцию do_it() и возвращающую REMOVE_ME если он закончил. Пример такого
обьекта: ColorFader.
*/
IntervalHandler.targets={};
IntervalHandler.len=0;
function IntervalHandler() {
//если народа в очереди нет, то гасим таймер
if(IntervalHandler.len<1) {window.clearInterval(IntervalHandler.timer); IntervalHandler.timer=null;}
for(var i in IntervalHandler.targets)
if(IntervalHandler.targets[i].do_it()==REMOVE_ME) {
delete IntervalHandler.targets[i];
IntervalHandler.len--;
}
}
//******* рабочие функции *******
function getRGB(str) {
return [parseInt(str.substr(0,2),16), parseInt(str.substr(2,2),16), parseInt(str.substr(4,2),16)];
}
to_hex.hexChars = "0123456789ABCDEF";
function to_hex(get) {
var a=get%16;
return to_hex.hexChars.charAt((get-a)/16) + to_hex.hexChars.charAt(a);
}
//-->
</script></head><body>
<span id="spn1" onMouseOver="fade_me('spn1', '6505a5', 'cefd29', 40)" onMouseOut="fade_me('spn1', null, '6505a5', null)">Test</span><br>
<span id="spn2" onMouseOver="fade_me('spn2', '6505a5', 'cefd29', 20)" onMouseOut="fade_me('spn2', null, '6505a5', null)">Test</span><br>
<span id="spn3" onMouseOver="fade_me('spn3', '6505a5', 'cefd29', 10)" onMouseOut="fade_me('spn3', null, '6505a5', null)">Test</span><br>
<span id="spn4" onMouseOver="fade_me('spn4', '6505a5', 'cefd29', 5)" onMouseOut="fade_me('spn4', null, '6505a5', null)">Test</span><br>
<span id="spn5" onMouseOver="fade_me('spn5', '6505a5', 'cefd29', 1)" onMouseOut="fade_me('spn5', null, '6505a5', null)">Test</span><br>
</body>
</html> |
Код работает правильно везде кроме Моззилы. Последняя почему то глючит с onMouseOut - событие не вызывается. У меня нет времени на обход ее очередного глюка... |