Voici encore une fois un script que j'ai codé cette nuit en rêvant, et que je me suis attaché a réaliser ce matin
mettre les deux images dans un répertoire img au niveau du fichier html
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Nouvelle page 1</title> <style type="text/css"> html, body {height:100%; width:100%; margin:0; padding:0;} body { background-color:silver;} #one {position:absolute; top:100px; left:100px; } #two {position:absolute; top:100px; left:400px; } </style> <script type="text/javascript"> /*======================================/ / Yet another one dreamt by SPaceFrog / / =====================================*/ function reflect(){ var tabmirroir=new Array(); var tabimg=document.getElementsByTagName('img'); var blancstrip=document.createElement('div'); blancstrip.style.height='1px'; blancstrip.style.position='relative'; blancstrip.style.clear='both'; blancstrip.innerHTML="" blancstrip.display="block"; blancstrip.overflow="hidden"; blancstrip.style.fontSize="0px"; blancstrip.style.lineHeight="0px"; blancstrip.style.border="solid 0px"; blancstrip.style.margin="0"; blancstrip.style.padding="0"; blancstrip.style.overflow="hidden"; var blancholder=document.createElement('div'); //recupération des images à traiter var i=0; while(tabimg[i] ){ if (/(^|\W)mirroir(\W|$)/.test(tabimg[i].className)){ tabmirroir.push(tabimg[i]) } i++; } i=0 while(tabmirroir[i++]){ blancstrip.style.backgroundImage="url('"+tabmirroir[i-1].src+"')"; var imgtop=tabmirroir[i-1].offsetTop; var imgleft=tabmirroir[i-1].offsetLeft; var imgwidth=tabmirroir[i-1].offsetWidth; var imgheight=tabmirroir[i-1].offsetHeight; var j=0; var holder=blancholder.cloneNode(true); holder.style.position='absolute'; holder.style.top=imgtop+imgheight+"px"; holder.style.left=imgleft+"px"; while(j++<imgheight){ var puzzlestrip=blancstrip.cloneNode(true) puzzlestrip.style.width=imgwidth+"px"; puzzlestrip.style.backgroundPosition="0px "+j+"px" puzzlestrip.style.opacity = (90-(j/imgheight*100))/100; puzzlestrip.style.filter = 'alpha(opacity=' + (90-((j/imgheight*100))) + ')'; holder.appendChild(puzzlestrip) } document.body.appendChild(holder) } } </script> </head> <body onload="reflect()"> <img id="one" src="img/logo.gif" class="mirroir" /> <img id="two" src="img/javascript-faq.gif" class="mirroir" /> </body> </html>
ou mettre n'importe quelle image avec dans le class le mot mirroir.
ça marche même avec des gifs animés
on peut aussi rajouté un décallage pour avoir une image en biais, voire rajouter deux fois de suite le puzzlestrip pour avoir un effet de reflet allongé ..
Il ne rend pas bien sous IE6 pour une question de hauteur du holder
si quelqu'un à un patch pour IE6 (proposé par NoobX )
Sinon il est valide w3c strict et compatible IE FFX chrome
Pour avoir une meilleure idée du rendu:
Page de démonstration
.
[edit]
Patch pour IE6 proposé pas NoobX
[/edit]
Partager