Accueil > > > LOUPE ET ZOOM
LOUPE ET ZOOM
Information sur la source
Description
c'est une loupe avec la possibilite d'augmenter le niveau d'agrandissement en jouant de la molette j'ai mis deux sources une ou il suffit de passer sur une image quelconque 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
- 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();
- }
-
- }
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
Fichier Zip
Historique
- 02 mars 2011 21:48:28 :
- ajout de commentaires
- 05 mars 2011 18:15:15 :
- ajout d'une source
- 12 mars 2011 11:33:57 :
- debogage
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Zoom genre loupe sur image [ par Annadrill ]
Bonjour, voilà, j'essaie de réaliser quelque chose de ce genre http://www.magictoolbox.com/magicmagnify/ mais je ne sais pas par ou commencer, m'y co
Zoom sur graphique en javascript ou php [ par nico00 ]
Bonjour à tous j'ai fais un programme qui affiche des signaux en php voici le code: <?php restore_error_handler(); error_reporting(E_ALL & ~E_STRICT);
Ouvrir une image à partir d'une zone cliquable avec un effet de zoom? [ par bahh66 ]
Bonjour, je pose cette question ici mais je ne suis pas sur d'être au bon endroit... Je dois réaliser un cd-rom pour une présentation de musée. J'ai
Zoom A+ et A- IE ou firefox (ctrl + - ou ctrl + -) dans une page web (et idem Volume) [ par thierryd75 ]
Bonjour, Je suis en train de développer un site web et je cherche le moyen d'augmenter le zoom (75 - 100% - 125 %) de ma page via ma page pour la vis
Zoom [ par fuksan ]
Bonjour, J'ai trouvé une multitude de Zoom en cherchant dans le site. Cependant, je n'ai pas réussi à trouver exactement celui que je cherche. En fa
Zoom image [ par etu54 ]
Bonjour, De par mes études je suis dans la programmation web depuis 1 an environ. Cependant le javascript m'est encore assez inconnu mis a part les
[XML/SVG] zoom sur plusieurs éléments [ par BARIS69330 ]
Bonjour, je bosse actuellement sur du svg et il me faut faire un zoom sur plusieurs evenements quand je passe la souris dessus grâce aux fonctions onm
script pour zoom (comme google maps) [ par Rose6 ]
salut, je repose ma question car je n'ai obtenu aucune réponse satisfaisante... connaissez vous un script pour zoomer et se déplacer sur une image (
comportement de google chrome "TRES ETRANGE" [ par WiDOC ]
Bonjour, alors voila j'ai un bug plutôt "hors du commun" je trouve. en fait c'est peut être même pas un bug mais un fonctionnement de google chrome q
Image SVG coupée lors d'un zoom [ par Pitus38 ]
Bonjour à tous, J'ai un petit soucis avec mon image SVG, je gère la fonction mousewheel pour agrandir et réduire en zoomant et dézoomant avec la mole
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|