c'est une loupe avec la possibilite d'augmenter le niveau d'agrandissement en jouant de la molette
j'ai mis trois sources deux ou il suffit de passer sur une image quelconque avec une différence quand a la position de l'image qui subit le zoom et une autre avec une zone pour l'image qui subit la loupe pour cette derniere je lui ai rajouter une variante avec prechargement
Source / Exemple :
var kloupe={
mooz:1,
facteur:0,
taille:0,
element:null,
zoom:function(e){
if(kloupe.taille == 0){
kloupe.taille=document.getElementById('igmg').offsetHeight;
}
var delta = 0;
delta =((e.wheelDelta) ? e.wheelDelta/120 : -e.detail/3);
if(kloupe.taille+(kloupe.taille*(kloupe.mooz+delta))>document.getElementById('igmg').parentNode.offsetHeight){
kloupe.mooz+=((delta<0) ? -0.1 : 0.1);
document.getElementById('igmg').style.height=kloupe.taille*kloupe.mooz+'px';
kloupe.loupe(e);
}
else{
document.getElementById('igmg').style.height=document.getElementById('igmg').parentNode.offsetHeight+'px';
kloupe.loupe(e);
}
},
loupe:function(evt){
evt=evt ? evt : event
var grande_image=document.getElementById('igmg');
var igmp=kloupe.element;
var clic=grande_image.parentNode;
var dde=(navigator.vendor) ? document.body : document.documentElement;
if(kloupe.facteur == 0){
kloupe.facteur=grande_image.offsetHeight/igmp.offsetHeight;
}
var setX =evt.clientX + dde.scrollLeft;
var setY =evt.clientY + dde.scrollTop;
grande_image.style.left=-((setX-igmp.offsetLeft)*kloupe.facteur*kloupe.mooz)+(clic.offsetWidth/2)+'px';
grande_image.style.top=-((setY-igmp.offsetTop)*kloupe.facteur*kloupe.mooz)+(clic.offsetHeight/2)+'px';
},
dp:function(){
var grand=document.getElementById('igmg').parentNode;
var adj=kloupe.element;
if(grand.style.display && grand.style.display=="block"){
grand.style.display="none";
}
else{
grand.style.display="block";
var dde=document.documentElement;
var ddn=(navigator.vendor) ? document.body : document.documentElement;
if(adj.offsetLeft+grand.offsetWidth+adj.offsetWidth+20>dde.clientWidth+ddn.scrollLeft){
grand.style.left=adj.offsetLeft-grand.offsetWidth-20+'px';
}
else{
grand.style.left=adj.offsetLeft + adj.offsetWidth+20+'px';
}
if(adj.offsetTop+grand.offsetHeight>dde.clientHeight+ddn.scrollTop){
grand.style.top=adj.offsetTop - grand.offsetHeight + adj.offsetHeight-20+'px';
}
else{
grand.style.top=adj.offsetTop-10+'px';
}
}
},
raz:function(lui){
if(kloupe.element!=null){
if(navigator.appName.substring(0,5)=="Micro"){
kloupe.element.detachEvent('onmousewheel', kloupe.zoom);
kloupe.element.detachEvent('onmousewheel', kloupe.selecte);
kloupe.element.detachEvent('onmousemove', kloupe.loupe);
kloupe.element.detachEvent('onmouseout', kloupe.dp);
}
else{
kloupe.element.removeEventListener("mousemove", kloupe.loupe, false);
kloupe.element.removeEventListener("mouseout", kloupe.dp, false);
var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel');
kloupe.element.removeEventListener(elmouse, kloupe.zoom, false);
kloupe.element.removeEventListener(elmouse, kloupe.selecte, false);
}
}
kloupe.element=lui;
var adi=document.getElementById('igmg');
adi.src=lui.src
kloupe.facteur = 0;
kloupe.taille=0;
kloupe.mooz=1;
adi.style.height=lui.offsetHeight*4+'px';
if(navigator.appName.substring(0,5)=="Micro"){
lui.attachEvent('onmousewheel', kloupe.zoom);
lui.attachEvent('onmousewheel', kloupe.selecte);
lui.attachEvent('onmousemove', kloupe.loupe);
lui.attachEvent('onmouseout', kloupe.dp);
}
else{
lui.addEventListener("mousemove", kloupe.loupe, false);
lui.addEventListener("mouseout", kloupe.dp, false);
var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel');
lui.addEventListener(elmouse, kloupe.zoom, false);
lui.addEventListener(elmouse, kloupe.selecte, false);
}
kloupe.dp();
},
selecte:function (ev){
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
}
}
Conclusion :
diiiiinnnng daaaannnng doooonnnng
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.