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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<meta name="description" content="Page type">
<title>Page type</title>
<style>
body {
background-color:#dcdcdc;
color:#000000;
font-family:sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
h1,h2,h3,h4,h5 {
font-family:serif;
}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
margin:0px;
padding:0px;
}
p {
padding:6px;
}
ul,ol,dl {
list-style:none;
padding-left:6px;
padding-top:6px;
}
li {
padding-bottom:6px;
}
</style>
<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
<script>
$(function(){
/*
* inverse la visibilité des boutons ZoomIn et ZoomOut
*/
function ZoomOK(){
if ($("#btnZoomIn").css("visibility") == "visible"){
$("#btnZoomIn").css("visibility","hidden");
$("#btnZoomOut").css("visibility","hidden");
} else {
$("#btnZoomIn").css("visibility","visible");
$("#btnZoomOut").css("visibility","visible");
}
}
/*
* zoomImage(boolZoom, pourcent, limite, millisecondes)
*
* Si boolZoom est true on agrandit width et height de poucent
* si la limite en pixels n'est pas dépassée.
*
* Si boolZoom est false on diminue width et height de poucent
* si la limite en pixels n'est pas dépassée.
*
* L'animation dure millisecondes.
*
* Comme on travaille avec une limite, après une série de ZoomIn et
* de ZoomOut la taille relative des images en sort complétement modifiée.
*
* Si on n'impose pas de limite, un ZoomOut peut faire disparaître l'image
* et le ZoomIn suivant donne une image à sa taille par défaut.
* Pour tester cet effet, mettre la limite à 0 dans btnZoomOut
*
* Exercice : utiliser un effet easing différent de l'effet par défaut (linear).
* plug-in Easing : http://gsgd.co.uk/sandbox/jquery/easing/
*/
$("#btnZoomIn").click(function() {
ZoomOK();
zoomImage(true, 20, 800, 4000); // +20% de la taille précédente, limiter à 800px, 4s
return false; // stop l'action par défaut et la propagation de l'événement
})
$("#btnZoomOut").click(function() {
ZoomOK();
zoomImage(false, 20, 200, 4000); // -20% de la taille précédente, limiter à 200px, 4s
return false; // stop l'action par défaut et la propagation de l'événement
});
function zoomImage(boolZoom, pourcent, limite, millisecondes) {
var obj = $("img.superZoom");
var n = obj.length - 1;
/*
* on sélectionne toutes les images ayant la class
* superZoom mais on traite chaque image séparément
*/
obj.each(function(i, item){
/*
* i est le numéro de l'image
* item est l'image
*/
// si boolZoom est true et que la limite de taille n'est pas dépassée
if (boolZoom){
if (($(item).width() < limite) && ($(item).height() < limite)){
$(item).animate({
width: "+=" + pourcent + "%",
height: "+=" + pourcent + "%"
}, millisecondes, function(){
// lorsque l'animation de la dernière image est terminée
if (i == n){
ZoomOK();
}
});
} else {
/*
* une image est hors limite
* diminuer de 1 le nb d'images
* si c'était la dernière image...
*/
n -= 1;
if (i == n){
ZoomOK();
}
}
} else {
// pour boolZoom false
if (($(item).width() > limite) && ($(item).height() > limite)){
$(item).animate({
width: "-=" + pourcent + "%",
height: "-=" + pourcent + "%"
}, millisecondes, function(){
// lorsque l'animation de la dernière image est terminée
if (i == n){
ZoomOK();
}
});
} else {
/*
* une image est hors limite
* diminuer de 1 le nb d'images
* si c'était la dernière image...
*/
n -= 1;
if (i == n){
ZoomOK();
}
}
}
});
}
});
</script>
</head>
<body>
<div>
<button id="btnZoomIn">ZoomIn</button> <button id="btnZoomOut">ZoomOut</button>
</div>
<div>
<p>
<img class="superZoom" style="width:480px; height:250px;" src="../images/imageTest.png"/>
</p>
<p>
<img class="superZoom" style="width:280px; height:150px;" src="../images/imageTest.png"/>
</p>
</div>
</body>
</html> |
Partager