Fluidité IE8 pour déplacement d'image
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 ++ :oops: )
Le code :
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
| <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:
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> |
