Menu dock style MAC OS

Invité · 22/06/2012, 20h37

Bonjour à tous,

j'ai récupéré sur le net un code source qui permet de faire un menu style dock (comme sur mac) pour son site.
Cependant je ne veux pas copier bêtement le code et je cherche à comprendre comment il fonctionne, en particulier l’algorithme qui utilise apparemment une droite d'agrandissement.

Voici le code:

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
 
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
 
<SCRIPT LANGUAGE="JavaScript">
<!--
 
MIN = 33 ;  // largeur minimum en pixel
MAX = 115 ; // largeur maximum en pixel
REACTION = 1.2 ; // réaction des icons par rapport à la souris. plus grand --> plus d'icons qui réagissent
 
A = ((MIN-MAX)/(MAX * REACTION)) ; // coef directeur de la droite d'agrandissement
IE = document.all ? 1 : 0 ;
img_tags = new Array();
 
function ouEstMaSouris(e)
{
	var dock = document.getElementById('dock') ; // div qui contient la barre de menu.
 
	var x = 0;
	if (IE)	x = e.clientX ; // coordonnées x de la souris sur IE 5.5
	else	x = e.pageX ;  // coordonnées x de la souris sur Mozilla ou Netscape 7
 
	x -= dock.offsetLeft ; // on modifie la coordonnée pour quelle soit relatif au div et non à la fenetre.
 
	img_tags = dock.getElementsByTagName('img') ; // les images contenus dans le div
 
	for(i=0 ; i<img_tags.length ; i++) // pour chaque images
	{
		millieu = img_tags[i].offsetLeft + parseInt(img_tags[i].style.width)/2 ;
		delta = millieu - x ;
 
		if (delta < 0) delta *= -1 ;
 
		coef = A * delta + MAX ;
 
		if (coef < MIN) coef = MIN ;
		else if (coef > MAX) coef = MAX ;
 
		img_tags[i].style.width=coef;
		img_tags[i].style.height=coef;
	}
}
 
//-->
</SCRIPT>
 
</HEAD>
 
<BODY>
<!-- Déclaration du DIV contenant le menu -->
<!-- 'top' et 'left' peuvent etre modifié pour placer le menu ailleurs (10,10 est le haut à gauche) -->
<!-- 'fixed' fixe le menu (il ne suit pas la scrollbar) et peut etre modifié en 'absolute' (suit la scrollbar) -->
<div style="position:fixed;top=10;left:10;" id="dock" onmousemove="ouEstMaSouris(event)">
 
<!-- 'width' et 'height' sont à la taille minimum -->
<A HREF="#" title="Firefox"><IMG SRC="firefox.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Thunderbird"><IMG SRC="thunderbird.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="MySQL Manager"><IMG SRC="mysqlmanager.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Paintshop pro 8"><IMG SRC="psp8.png" style="width:33;height:33;" BORDER="0" align="top"></A>
 
<A HREF="#" title="Object Media"><IMG SRC="objectmedia.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Settings"><IMG SRC="settings.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Skin studio"><IMG SRC="skinstudio.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Stardock central"><IMG SRC="stardock central.png" style="width:33;height:33;" BORDER="0" align="top"></A>
<A HREF="#" title="Theme manager"><IMG SRC="theme manager.png" style="width:33;height:33;" BORDER="0" align="top"></A>
 
</div>
 
</BODY>
</HTML>

Merci d'avance de m’éclairer sur le fonctionnement de cet algorithme avec cette fameuse "droite d'agrandissement".

**Watilin** · 23/06/2012, 02h23

Bonsoir !

La formule est assez simple, tant qu'on n'est pas allergique aux maths

C'est une fonction affine : coef = A * delta + MAX.
Si on regarde de plus près, on voit que delta = millieu - x, x étant la position de la souris dans le dock. Donc delta est la distance entre la souris et le milieu de l'image. Si la souris est justement au milieu de l'image, cette distance est nulle et ça fait :

coef = A * 0 + MAX
= MAX

Donc c'est quand la souris est au milieu de l'image que l'image est la plus grande.

Ensuite, si on regarde A, on voit que ça commence par MIN - MAX, et ça donne un truc négatif, donc la fonction est décroissante. Autrement dit plus on s'éloigne, plus l'image sera petite. La taille des images est limitée par ces deux lignes :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if (coef < MIN) coef = MIN ;
else if (coef > MAX) coef = MAX ;

Enfin, comme A est divisé par REACTION, si on augmente REACTION la pente sera plus douce, autrement dit les images éloignées seront un peu plus affectées.

N'hésite pas à demander si quelque chose n'est pas clair

Note qu'il n'est pas conseillé de modifier les styles width et height des images, ça fait souvent un effet de crénelage assez moche.

Invité · 23/06/2012, 14h17

Merci beaucoup pour ta réponse très précise, j'ai compris

!

Par contre pour le :

Note qu'il n'est pas conseillé de modifier les styles width et height des images, ça fait souvent un effet de crénelage assez moche.

Y a t'il un autre moyen de reproduire le même effet alors ?

**Watilin** · 24/06/2012, 00h59

Eh bien en fait, on peut se permettre d'avoir des images crénelées pendant les phases de transition, tant que ces phases ne durent pas trop longtemps. L'idéal serait de prévoir plusieurs versions de la même image, avec différentes tailles.
Par exemple, une image avec la taille MIN et une image avec la taille MAX. Le script changerait alors l'url des images atteignant l'une ou l'autre des deux tailles prévues. Bien sûr, cela complique un peu le script... Tout dépend du niveau de « perfectionnisme » que tu veux atteindre.

Invité · 25/06/2012, 12h47

Ok ok, merci pour ces précisions

Menu dock style MAC OS

JavaScript

Discussions similaires

Partager

Partager