Zoom zoom zoom

Télécharger le projet
Commenter

Description

on peut
- zoomer avec la molette de la souris l'image zoom a l'endroit ou se trouve le pointer de la souris
- sélectionner une partie de l'image avec un rectangle clic droit de souris le zoom se fera dans la zone du rectangle
- deplacer l'image (drag) clic gauche de la souris
- un bouton raz

compatible ie ff opera chrome..etc

Source / Exemple : 


 var tour=3; var cz=5 function disableselecte(e){ return false; } function enableselecte(e){ return true; } function souris(s){ var dde=(navigator.vendor) ? document.documentElement.childNodes[1] : document.documentElement; setX =((navigator.appName.substring(0,3)=="Mic") ? event.clientX : s.clientX) + dde.scrollLeft; setY =((navigator.appName.substring(0,3)=="Mic") ? event.clientY : s.clientY) + dde.scrollTop; return false; } (navigator.appName.substring(0,3)=="Net") ? document.documentElement.addEventListener("mousemove", souris, false) : document.documentElement.attachEvent('onmousemove', souris); function cadrezoom(){ if(cz==5){ oper=adi.offsetWidth/adi.offsetHeight; px=setX; py=setY; adi=document.getElementById('divim'); adi.parentNode.appendChild(document.createElement('div')).setAttribute("id",'cadre'); cd=document.getElementById('cadre'); cd.style.position='absolute'; cd.style.top=setY-adi.parentNode.offsetTop+"px"; cd.style.left=setX-adi.parentNode.offsetLeft+"px"; cd.style.height = 10+"px"; cd.style.width = 10+"px"; cd.style.minWidth  =20+"px"; cd.style.minHeight =20+"px"; cd.style.backgroundColor='black'; if(document.all && !window.opera){  cd.style.filter = 'alpha(opacity=25)'; }  else{  cd.style.opacity = 0.3; } cz=0 cd.setAttribute("onmouseup","tour=2"); } if(tour==2){ document.onmousedown=enableselecte; cz=5; bour=(adi.offsetLeft-cd.offsetLeft)/adi.offsetWidth; boul=(adi.offsetTop-cd.offsetTop)/adi.offsetHeight; adi.style.height=adi.offsetHeight*(adi.parentNode.offsetHeight/cd.offsetHeight)+'px'; adi.style.width=adi.offsetHeight*oper+'px'; adi.style.left=bour*adi.offsetWidth+'px'; adi.style.top=boul*adi.offsetHeight+'px'; cd.parentNode.removeChild(cd); return false; } cd.style.height = (cd.offsetHeight+(setY-py))+"px"; cd.style.width = (cd.offsetWidth)+(setX-px)+"px"; document.onmousedown=disableselecte; px=setX; py=setY; setTimeout(cadrezoom,15); } function dirizoom(e){ var delta = 0; if (!e) e = window.event; if (e.wheelDelta) { delta = e.wheelDelta/120;  } else if (e.detail) { delta = -e.detail/3; } if(delta<0){ val=-0.15; } else{ val=0.15; } adi=document.getElementById('divim'); var dirle=(adi.offsetWidth/2)-(setX-(adi.parentNode.offsetLeft+adi.offsetLeft)); var dirto=(adi.offsetHeight/2)-(setY-(adi.parentNode.offsetTop+adi.offsetTop)); var lf=adi.offsetWidth; var rf=adi.offsetHeight; adi.style.width=lf+(lf*val)+'px'; adi.style.height=rf+(rf*val)+'px'; adi.style.left=adi.offsetLeft-((adi.offsetWidth-lf)/2)+(dirle*val)+'px'; adi.style.top=adi.offsetTop-((adi.offsetHeight-rf)/2)+(dirto*val)+'px'; } function sp(){ if(tour==2){ document.onmousedown=enableselecte; tour=3; document.getElementById('divim').style.cursor='auto'; return false; } if(tour==3){ px=setX; py=setY; tour=0; adi=document.getElementById('divim'); } adi.style.left=(adi.offsetLeft+setX-px)+'px'; adi.style.top=(adi.offsetTop+setY-py)+'px'; document.onmousedown=disableselecte; px=setX; py=setY; setTimeout(sp,10); } function dispatche(evt){ var evt = evt || window.event; adi=document.getElementById('divim'); if(evt.button == 0 || evt.button == 1){ adi.style.cursor='move'; sp() } if(evt.button == 2){ cz=5 cadrezoom(); } } function selecte(ev){ (navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault(); } function raz(){ adi=document.getElementById('divim'); oper=adi.offsetWidth/adi.offsetHeight; adi.style.height=400+'px'; adi.style.width=oper*400+'px'; adi.style.left=((adi.parentNode.offsetWidth-adi.offsetWidth)/2)+'px'; adi.style.top=((adi.parentNode.offsetHeight-adi.offsetHeight)/2)+'px'; } function init(){ adi=document.getElementById('divim') if(navigator.appName.substring(0,5)=="Micro"){ adi.attachEvent('onmousedown',function(){dispatche(event)}); adi.attachEvent('onmousewheel',dirizoom); adi.attachEvent('onmousewheel', selecte) } else{ if (navigator.userAgent.indexOf("Firefox") != -1){ adi.addEventListener('DOMMouseScroll', dirizoom, false); adi.addEventListener("DOMMouseScroll", selecte, false) } else{ adi.addEventListener('mousewheel', dirizoom, false); adi.addEventListener("mousewheel", selecte, false) } adi.setAttribute("onmousedown", "dispatche(event)", false) } }

Conclusion :


sa maaaarche
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)