1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| // Options (objet) :
// elt Requis Elément HTML Elément sur lequel s'applique le script
// min Optionnel nombre ou chaine Valeur de l'opacité sans survol Défaut : 25
// max Optionnel nombre ou chaine Valeur de l'opacité au survol Défaut : 100
// speed Optionnel nombre ou chaine Intervalle (ms) entre chaque changement Défaut : 25
// step Optionnel nombre ou chaine Variation de la valeur d'opacité à chaque changement Défaut : 5
// evtOn Optionnel chaine Evenement déclenchant le fading Défaut : 'mouseover'
// evtOff Optionnel chaine Evenement déclenchant le fading inverse Défaut : 'mouseout'
// eltOn Optionnel Elément HTML Elément déclenchant le fading Défaut : options.elt
//
// Exemple d'utilisation : new Fading({'elt': document.images[0], 'min': 50, 'max': '100', speed: 25, step: 5});
var Fading = function(options){
this.elt = options.elt;
this.min = options.min >= 0 ? +options.min : 25;
this.max = options.max >= 0 ? +options.max : 100;
this.courant = options.min >= 0 ? +options.min : 25;
this.speed = +options.speed || 50;
this.step = +options.step || 5;
this.timer = null;
this.evtOn = options.evtOn || 'mouseover';
this.evtOn = this.evtOn.replace(/^on/, '');
this.evtOff = options.evtOff || 'mouseout';
this.evtOff = this.evtOff.replace(/^on/, '');
this.eltOn = options.eltOn || options.elt;
var that = this;
if(this.elt.filters){
this.elt.style.width = this.elt.style.width || this.elt.offsetWidth+'px';
this.elt.style.filter = 'alpha(opacity='+this.min+')';
this.elt.filters[0].opacity = this.min;
this.propOp = this.elt.filters[0];
this.coeff = 1;
}
else{
this.elt.style.opacity = this.min / 100;
this.propOp = this.elt.style;
this.coeff = 100;
}
this.on = function(){
clearTimeout(that.timer);
that.removeEvent(that.eltOn, that.evtOn, that.on);
that.addEvent(that.eltOn, that.evtOff, that.off);
that.changeOp(that.courant, that.max);
}
this.off = function(){
clearTimeout(that.timer);
that.removeEvent(that.eltOn, that.evtOff, that.off);
that.addEvent(that.eltOn, that.evtOn, that.on);
that.changeOp(that.courant, that.min);
}
this.addEvent(this.eltOn, this.evtOn, this.on);
}
Fading.prototype.changeOp = function(from, to){
var that = this;
if(from == to){
this.propOp.opacity = to / this.coeff;
return false;
}
this.propOp.opacity = this.courant / this.coeff;
var pas = from < to ? 1 : -1;
this.courant = Math.abs(from - to) < this.step ? to : from + (this.step * pas);
this.timer = setTimeout(function(){that.changeOp(that.courant, to)}, this.speed);
}
Fading.prototype.addEvent = function(element, type, callback){
if (element.attachEvent) {
element.attachEvent("on" + type, callback);
}
else {
element.addEventListener(type, callback, false);
}
};
Fading.prototype.removeEvent = function(elt, type, callback){
if (elt.detachEvent) {
elt.detachEvent("on" + type, callback);
}
else {
elt.removeEventListener(type, callback, false);
}
}; |
