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> |
Partager