bonjour,
J'essaie d'utiliser Mootools pour faire une fonction scale avec animation en utilisant FX. IE9 a des comportement bizarres sur une meme ligne de code suivant si la class créée est un 'extends FX' ou si on crée une instance de FX et qu'on redefinit la fonction set.
Explication avec les 2 codes, en rouge sont les 2 lignes identiques qui posent problèmes. Une explication ??
1-code avec la class qui étend FX
2- code avec une instance de FXCode:
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<!DOCTYPE html> <html lang="en"> <head> <title>TITLE</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body { margin: 0; padding: 0; } #container { position: absolute; overflow: hidden; width: 640px; height: 480px; margin 0; top: 100px; left: 100px; } #kenburns { position: relative; width: 640px; height: 480px; margin: 0; background: transparent url(640-image1.jpg) no-repeat top left; } </style> <script type="text/javascript" src="mootools-core-1.4.5.js"></script> <script type="text/javascript"> Fx.Scale = new Class({ Extends : Fx, options : { origin : 'left top' }, initialize : function(element,options) { this.element = $(element); this.parent(options); this.element.style['msTransformOrigin'] = this.options.origin; this.set = function(value) { if (document.all) { // fonctionne sous IE9 this.element.style['msTransform'] = 'scale('+value+')'; } else { this.element.style['MozTransform'] = 'scale('+value+')'; } }.bind(this) }, start : function(from,to) { this.fromScale = from; this.toScale = to; this.parent(this.fromScale,this.toScale); } }); window.addEvent('domready',function() { var elm = $('kenburns'); var scale = new Fx.Scale(elm, {origin: 'center center'}); scale.start(1,2); }); </script> </head> <body id="" class=""> <div id="container"> <div id="kenburns"></div> </div> </body> </html>
j'ai mis 3 fichiers attachés, il faut aussi mootools core 1.4.5 (ou autre version)Code:
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<html> <head> <title>Roll scale</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="mootools-core-1.4.5.js"></script> <style type="text/css"> body { margin: 0; padding: 0; } #container { position: absolute; overflow: hidden; width: 640px; height: 480px; margin 0; top: 100px; left: 100px; } #kenburns { position: relative; width: 640px; height: 480px; margin: 0; background: transparent url(640-image1.jpg) no-repeat top left; } </style> <script type="text/javascript"> var Scaly = new Class({ Implements: [Options], options: { iniscale: 1, increment: 0.05, duration: 500 }, initialize: function(element, from, to, options) { this.element = $(element); this.setOptions(options); this.doit(from, to); }, doit: function(from, to) { var fx = new Fx(); fx.set = function(value) { if (document.all) { // même ligne de code que dans 1 // ne fonctionne pas sous IE9 this.element.style['msTransform'] = 'scale('+value+')'; } else { var style = "scale("+value+")"; $('counter').set('html', style); this.element.style['MozTransform'] = 'scale(' + value + ')'; } }.bind(this); fx.start(from, to); } }); window.addEvent('domready', function(){ var myFX = new Scaly("kenburns", 1, 2, {origin: 'center center'}); }); </script> </head> <body> <div id="container"> <div id="kenburns"> <img src="640-image1.jpg"> </div> </div> <div id="counter"></div> </body> </html>
un grand merci pour ceux qui se penche dessus.
