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".

Menu dock style MAC OS

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager