limite de déplacement d'une image sur hover

**SpaceFrog** · 11/08/2010, 08h48

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

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 :

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

**SpaceFrog** · 11/08/2010, 10h19

Bon ben avec une approche différente je suis arrivé a mes fins ...
En fait au lieu de faire varier le nombre de pixels pour faire varier la vitesse, je fais varier le delai du setInterval, du coup je maitrise au pixel près le déplacement.
Le seul hic est que la vitesse de déplacement maximale est moins grande ..

limite de déplacement d'une image sur hover

jQuery

Discussions similaires

Partager

Partager