limite de déplacement d'une image sur hover
Il y a un truc qui m'échappe dans la volatilité de mes limites de déplacement..
J'ai deux images superposées face devant et slider derrière.
sur le hover des boutons ou avec la molette de souris (addon molette jquery) je déplace l'image d'arrière plan de droite à gauche. La course autorisée de l'image est limitée et doit rester fixe. ici 409 et -502 la variable incrémentée et décrémentée appelée limit est testée avant l'animate.
Je passe par une variable plutot que par un offsetLeft car en fonction des résolution je n'ai pas les même valeurs ...
La où je reste perplexe est que la limite du déplacement varie 8O8O8O
le slider ne s'arrête pas à chaque fois au même endroit ! J'ai pourtant bein l'impression d'incrémenter et décrémenter correctement le témoin de limite ???
Peut être un oeil extérieur verrait la boulette ?
merci par avance.
Code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="JQScripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JQScripts/jquery.mousewheel.min.js"></script>
<title>Calculateur de conduits d'air</title>
<style type="text/css">
html, body {
height:100%;
width:100%;
}
body {
margin:0;
padding:0;
overflow:hidden;
}
#cont {
position:relative;
width:1024px;
height:475px;
margin: 0 auto;
overflow: hidden;
}
#face, #slider {
position:absolute;
top:0;
}
#controls {
position:relative;
width:200px;
top:20px;
margin-left: auto;
margin-right:auto;
overflow:hidden;
}
.sbutton{ width:40px;}
</style>
<script type="text/javascript">
var hoverInterval;
var limit=0
function gofastLeft() {
if(limit<429){
limit +=15;
$("#slider").stop().animate({left:'+=15'},100);
$("#temoin").val(limit)
}
}
function goLeft() {
if(limit<429){
limit +=1;
$("#slider").stop().animate({left:'+=1'},50)
$("#temoin").val(limit)
}
}
function gofastRight() {
if(limit>-502){
limit -=15;
$("#slider").stop().animate({left:'-=15'},100)
$("#temoin").val(limit)
}
}
function goRight() {
if(limit>-502){
limit-=1;
$("#slider").stop().animate({left:'-=2'},100)
$("#temoin").val(limit)
}
}
$(function(){
//__________________ LEFT
$("#goleft").hover(
function() {
// call doStuff every 100 milliseconds
hoverInterval = setInterval(goLeft, 100);
},
function() {
// stop calling doStuff
clearInterval(hoverInterval);
}
);
//__________________ FAST LEFT
$("#gofastleft").hover(
function() {
// call doStuff every 100 milliseconds
hoverInterval = setInterval(gofastLeft, 100);
},
function() {
// stop calling doStuff
clearInterval(hoverInterval);
}
);
//__________________ RIGHT
$("#goright").hover(
function() {
// call doStuff every 100 milliseconds
hoverInterval = setInterval(goRight, 100);
},
function() {
// stop calling doStuff
clearInterval(hoverInterval);
}
);
//__________________ FAST RIGHT
$("#gofastright").hover(
function() {
// call doStuff every 100 milliseconds
hoverInterval = setInterval(gofastRight, 100);
},
function() {
// stop calling doStuff
clearInterval(hoverInterval);
}
);
$("#face").mousewheel(function(event, delta) {
if (delta < 0) {
goRight()
}else if (delta > 0){
goLeft();
}
});
});
</script>
</head>
<body>
<div id="cont">
<img id="slider" src="pics/slider.png" alt="ouest ventil"/>
<img id="face" src="pics/face.gif" alt="ouest ventil" />
</div>
<div id="controls">
<input type="button" class="sbutton" id="gofastright" value="<<" />
<input type="button" class="sbutton" id="goright" value="<" />
<input type="button" class="sbutton" id="goleft" value=">" />
<input type="button" class="sbutton" id="gofastleft" value=">>" />
<input type="text" id="temoin" value="" />
</div>
</body>
</html> |
Pour info les deux images font 1024 px de large ...