Discussion :

[evevev]

Bonjour !
Je suis en train de tester le code de Bovino pour le déplacement dans une image.
Les seules données que j'ai modifiées sont les width de #main et du fieldset (toutes premières lignes du code ci-dessous)/
Le problème est que, à vitesse identique, le déplacement de l'image est parfaitement fluide sur ff et pas mal hâché sur IE8...
Y a-t-il quelque chose à paramétrer quelque part à votre avis ? Je suppose que oui car quand je vais voir la page de Démo de Bovino, la fluidité est parfaite avec les deux navigateurs...
Merci de votre aide !
(précision, je suis amateur ++ )

Le code :

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
<style type="text/css">
			h1,#global{text-align:center;}
			#main{width:500px;height:480px;overflow:hidden;position:relative;display:inline-block;outline:5px solid silver;}
			#thumb{display:inline-block;border:3px solid silver;vertical-align:top;margin-right:20px;}
			#clip{cursor:move;}
			#speed{margin:15px auto;}
			fieldset{width:500px;margin:10px auto;}
		</style>
		<script type="text/javascript" > 
 
var Clipper = function(tgtImg,opts){
	this.image = this.getConteneur(tgtImg);
	if(!this.image){
		return false;
	}
	var that = this;
	this.haveThumb = opts.haveThumb && this.initThumb(opts.thumbId);
	this.speed = opts.speed || 1;
	this.currentX = 0;
	this.currentY = 0;
	this.minX = this.image.parentNode.clientWidth - this.image.width;
	this.minY = this.image.parentNode.clientHeight - this.image.height;
	this.origX = 0;
	this.origY = 0;
	this.image.parentNode.onmousedown = function(e1){
		var evt = window.event || e1;
		that.origX = evt.clientX;
		that.origY = evt.clientY;
		that.image.onmousemove = function(e2){
			var evt2 = window.event || e2;
			var dX = (evt2.clientX - that.origX) * that.speed;
			var dY = (evt2.clientY - that.origY) * that.speed;
			dX += that.currentX;
			dY += that.currentY;
			dX = Math.min(dX,0);
			dX = Math.max(dX,that.minX);
			dY = Math.min(dY,0);
			dY = Math.max(dY,that.minY);
			that.currentX = dX;
			that.currentY = dY;
			that.origX = evt2.clientX;
			that.origY = evt2.clientY;
			that.image.style.marginLeft = dX + 'px';
			that.image.style.marginTop = dY + 'px';
			if(that.haveThumb){
				that.cadre.style.left = (Math.abs(dX/that.ratioX)-3)+'px';
				that.cadre.style.top = (Math.abs(dY/that.ratioY)-3)+'px';
			}
		};
	};
	this.image.onmouseup = function(){
		that.image.onmousemove = null;
	};
	this.image.onmouseout = function(){
		that.image.onmousemove = null;
	};
	this.image.ondragstart = function(){return false;};
};
Clipper.prototype.getConteneur = function(conteneur){
	if(conteneur.tagName){
		return conteneur;
	}
	else if(typeof conteneur === 'string'){
		return document.getElementById(conteneur);
	}
	else{
		return false;
	}
};
Clipper.prototype.initThumb = function(thImg){
	this.thumb = this.getConteneur(thImg);
	if(!this.thumb.tagName || this.thumb.tagName.toLowerCase()!=='img'){
		return false;
	}
	var that = this;
	this.thumb.parentNode.style.position = 'relative';
	this.thumb.parentNode.style.width = this.thumb.width + 'px';
	this.thumb.parentNode.style.height = this.thumb.height + 'px';
	this.ratioX = this.image.width / this.thumb.width;
	this.ratioY = this.image.height / this.thumb.height;
	this.cadre = document.createElement('div');
	this.cadreWidth = this.image.parentNode.clientWidth / this.ratioX;
	this.cadreHeight = this.image.parentNode.clientHeight / this.ratioY;
	this.refX = this.thumb.parentNode.offsetLeft;
	this.refY = this.thumb.parentNode.offsetTop;
	this.thumbMinX = this.refX + this.thumb.width - this.cadreWidth;
	this.thumbMinY = this.refY + this.thumb.height - this.cadreHeight;
	this.cadre.style.cssText = 'background-image:url(transp.gif);position:absolute;top:-3px;left:-3px;width:'+this.cadreWidth+'px;height:'+this.cadreHeight+'px;border:3px solid yellow;cursor:move;';
	this.thumb.parentNode.appendChild(this.cadre);
	this.cadre.onmousedown = function(){
		that.cadre.onmousemove = function(e4){
			var evt4 = window.event || e4;
			var dX = Math.max(evt4.clientX - that.cadreWidth/2,that.refX);
			dX = Math.min(dX,that.thumbMinX);
			dX = dX - that.refX;
			var dY = Math.max(evt4.clientY - that.cadreHeight/2,that.refY);
			dY = Math.min(dY,that.thumbMinY);
			dY = dY - that.refY;
			that.cadre.style.left = (dX - 3) + 'px';
			that.cadre.style.top = (dY - 3) + 'px';
			that.currentX = -dX * that.ratioX;
			that.currentY = -dY * that.ratioY;
			that.image.style.marginLeft = that.currentX + 'px';
			that.image.style.marginTop = that.currentY + 'px';
		};
	};
	this.cadre.onmouseup = function(){
		that.cadre.onmousemove = null;
	};
	this.thumb.onmouseout = function(){
		that.cadre.onmousemove = null;
	};
	this.thumb.ondragstart = function(){return false;};
	this.cadre.ondragstart = function(){return false;};
	return true;
};
window.onload = function(){window.myClip = new Clipper('clip',{speed:5,haveThumb:true,thumbId:'thumbImg'});};
</script>

et dans le body :

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
<div id="global">
			<div id="thumb">
				<img alt="Miniature" src="../../images/carte/osm/centre-cz-pt.jpg" id="thumbImg" />
			</div>
			<div id="main">
				<img id="clip" alt="Photo" src="../../images/carte/osm/centre-cz.jpg" />
			</div>
			<div id="speed">
				<fieldset>
					<legend>Modifier la valeur du paramètre speed :</legend>
					<input type="button" value="1" onclick="myClip.speed = 1;document.getElementById('speedValue').innerHTML = this.value;" />
					<input type="button" value="2" onclick="myClip.speed = 2;document.getElementById('speedValue').innerHTML = this.value;" />
					<input type="button" value="3" onclick="myClip.speed = 3;document.getElementById('speedValue').innerHTML = this.value;" />
					<input type="button" value="4" onclick="myClip.speed = 4;document.getElementById('speedValue').innerHTML = this.value;" />
					<input type="button" value="5" onclick="myClip.speed = 5;document.getElementById('speedValue').innerHTML = this.value;" />
					<input type="button" value="6" onclick="myClip.speed = 6;document.getElementById('speedValue').innerHTML = this.value;" />
					<input type="button" value="7" onclick="myClip.speed = 7;document.getElementById('speedValue').innerHTML = this.value;" />
					<input type="button" value="8" onclick="myClip.speed = 8;document.getElementById('speedValue').innerHTML = this.value;" />
					<input type="button" value="9" onclick="myClip.speed = 9;document.getElementById('speedValue').innerHTML = this.value;" />
					<input type="button" value="10" onclick="myClip.speed = 10;document.getElementById('speedValue').innerHTML = this.value;" />
				</fieldset>
				<h2>Valeur du paramètre speed : <span id="speedValue">5</span></h2>
			</div>
		</div>

[zulad]

Question bête : tu as appliqué le script de la même façon sans retouches mis à part les références des objets (images et links et autre) ?

Parceque si c'est le cas, le script devrais s'exécuter de la même façon car à ma connaissance il n'y a pas de paramétrisation du js nécessaire dans IE8, c'est juste js on ou off.

[Bovino]

En fait, IE en général est moins performant concernant les reflows imposés par le déplacement des éléments, donc effectivement, si ton image est un peu lourde, ça pourrait expliquer l'effet saccadé.
Et dans ce cas, il n'y a pas forcément grand-chose à faire...