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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
ul{
list-style:none;
}
ul li{
float:left;
margin : 10px;
position:relative;
width:100px;
height:100px;
border:1px solid red;
}
ul li img{
position:absolute;
left:50%;
margin-left:-50px;
top:50%;
}
</style>
<script type="text/javascript">
function initImage(contentId){
var conteneur = document.getElementById(contentId);
var ListeImage = conteneur.getElementsByTagName("img");
for (var i = 0, l = ListeImage.length; i < l; i++) {
var element = ListeImage[i];
//On centre l'élément de façon vertical en fonction de sa hauteur
element.style.marginTop = ( - (element.offsetHeight / 2)) + 'px'
var action = function(){
var t = i ;
var x = element
//Speed définit combien de temps l'effet doit durer :)
var Speed = 250 ;
x.timer = null;
x.startX = parseInt(x.width);
//c corespond au temps en ms pour l'appel de la méthode go ici 20ms
c = (1000 / 50);
//Math.round arrondi à l'entier supérieur
d = Math.round(Speed / c);
w = new Array();
for (var i = 1; i <= d; i++) {
//Le 50 indique qu'as partir de la taille originale on ajoute 50px
w.push(easeInOutSine(i * c, x.startX, x.startX+50 - x.startX, Speed))
}
x.w = w ;
return function(){
x.currentStepX = 0 ;
x.currentStepY = 0 ;
go(x,c,false);
};
}(i,element);
var action2 = function(){
var x = element
c = (200 / 50);
return function(){
x.currentStepX = x.currentStepX-1 ;
x.currentStepY = x.currentStepY-1 ;
go(x,c,true);
};
}(i,element);
ListeImage[i].onmouseover = action;
ListeImage[i].onmouseout = action2;
}
}
function EffectOpen(element){
}
function easeInOutSine(t, b, c, d) {
//Fonction mathématique permettant de calculer un effet fluide au niveau des pas d'agrandissement
return - c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
}
function go(b, c, out) {
if(b.timer != null){
window.clearInterval(b.timer);
b.timer = null;
}
b.timer = window.setInterval(function() {
var a = true;
if (b.w[b.currentStepX]) {
//On augmente la taille
b.style['width'] = b.w[b.currentStepX] + 'px';
//On positionne de façon centré par rapport au conteneur
b.style.marginLeft = ( - (b.w[b.currentStepX] / 2)) + 'px'
b.style.marginTop = ( - (b.offsetHeight / 2)) + 'px'
if(!out){
b.currentStepX++;
}
else{
b.currentStepX--;
}
a = false
}
if (a) {
window.clearInterval(b.timer);
b.timer = null;
return
}
}, c);
}
</script>
</head>
<body onload="initImage('mesimages')">
<ul id="mesimages">
<li><img src="diapo_mini/images/diapo1.jpg" width="100px;" /></li>
<li><img src="diapo_mini/images/diapo2.jpg" width="100px;" /></li>
<li><img src="diapo_mini/images/diapo3.jpg" width="100px;" /></li>
<li><img src="diapo_mini/images/diapo4.jpg" width="100px;" /></li>
<li><img src="diapo_mini/images/diapo5.jpg" width="100px;" /></li>
</ul>
</body>
</html> |
Aggrandir et diminuer une image onMouseOver
Répondre avec citation
en fait, il y a certaines instructions que je ne comprends pas (j'ai pas mal de lacunes en maths, j'avoue c'est difficile pour moi de me concentrer...) comme :
Envoyé par devyan
Partager