Javascript: Zoom sur la souris SANS Jquery plugins ou

J'ai cherché partout pendant des semaines, et j'ai simplement ne peut pas trouver quelque chose à me dire ce que je fais mal ou la façon de procéder. L'objectif est de créer une fonction similaire à Amazon de zoom à la souris pour les produits avec de petites images.

Actuellement, je suis à une perte pour la façon de procéder, même si je suis consciente que j'aurai besoin de deux images, l'une dans le "zoom" de la taille et dans le "zoom" de la taille. Je ne suis pas à l'aide de Jquery- je ne peux pas les installer tous les plugins pour le site web par l'intermédiaire de ma demande de l'employeur. Je suis fondamentalement pour vous demander le plus difficile de répondre, et je m'en excuse à l'avance. Je dois le faire à partir de modérée à gratter. Avertissement: je suis un Étudiant en programmation. Prenez ça comme vous voulez.

J'ai le code HTML et CSS script, et parce que nous n'avons pas réellement d'avoir un IDE ici, je fais cela sur codecademy projet de la section, sinon j'aurais le programme de cette complètement en live. Vous pouvez trouver mon code ici, mais je vais aussi poster le code ci-dessous, où ce lien est lié à des changements de code, car il utilise la procédure de l'épargne.

Remarque: j'ai d'abord eu en sorte que la boîte grise est à la suite de ma souris par rapport au centre. Il était scintille au fur et à mesure, mais cela fonctionnait. Aujourd'hui, il est décidé de ne pas, au moins sur mon ordinateur de travail. Je n'ai pas testé sur mon ordinateur personnel.

Edit: Le code fonctionne sur ma Surface Pro 3, bien qu'il ne suive la souris hors de l'image (qui est temporaire et quelque chose au hasard, que j'ai saisi). Je ne sais pas pourquoi le code ne fonctionne pas sur mon ordinateur de travail, mais il est probable que c'est un Macintosh OSX version 10.6.8...

Code HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>

<img id="imgZoom" onmousemove="zoomIn()" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn()"></div>
</body>
</html>

Code CSS:

#imgZoom {
    height: 300;
}

#overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:20%;
    height:20%;
    padding: 25px;
    border: 5px solid gray;
    background-color: white;
    opacity:0.4;
    text-align:center;
    z-index: 1000;
}

Code Javascript:

function zoomIn()
{
    var element = document.getElementById("overlay");
    element.style.visibility = "visible";

    var x = event.clientX;     //Get the horizontal coordinate
    var y = event.clientY;     //Get the vertical coordinate

    element.style.top = y - 80;
    element.style.left = x - 80;
}

function zoomOut()
{
    var element = document.getElementById("overlay");
    element.style.visibility = "hidden";
}

jQuery ne nécessite aucune installation, juste comme le téléchargement ou l'Ajout de fichiers sur le serveur web ou si vous ne pouvez pas le faire insérer une balise de script src à partir de jQuery CA ou de son site <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js" type="text/javascript"></script>
Désolé, j'ai pensé que JQuery requis l'installation de certains, surtout si vous souhaitez utiliser des choses comme Bootstrap. Où je aller à l'école pour la programmation, la plupart de mes instructeurs de nous avoir prévenu de ne pas compter sur JQuery, c'est plus une béquille que la meilleure réponse - pas que JQuery est une mauvaise chose, c'est juste comme un étudiant, je suis en train d'apprendre la méthode complète. Je suppose que c'est principalement la raison pour laquelle je ne veux pas l'utiliser, afin que je puisse apprendre comment le faire manuellement. En fait, je suis surtout un programmeur de jeux vidéo, si ridiculement difficile de code qui n'a pas de aides est généralement ce que je fais tous les jours
Je suis d'accord avec vous puisque vous êtes en apprentissage, vous avez le droit de savoir comment les choses sont faites à partir de là, de base, mais à l'avenir souvenez-vous de réinventer la roue est mauvais, où vous travaillez dans une contrainte de temps si vous pouvez le faire facilement avec un autre outil, becoz vous ne savez pas quand votre choses vont casser
oh oui, je ne suis pas en désaccord. Ils nous mettre en garde contre la trop. Heureusement, mon employeur est intéressé à voir ce que ça fonctionne sur son propre ainsi - c'est plus une position de niveau d'entrée, et très laxiste sur la façon de faire les choses, donc je vais prendre mon temps pour lisser le travail. Plus tard, bien sûr, une fois que j'ai une idée, je vais faire usage de méthodes plus rapides! La vitesse est toujours la clé dans n'importe quel secteur

OriginalL'auteur Kitfoxpup | 2015-11-19

4

Cela fonctionne pour moi: (Ici, est un JSFiddle)
```
#imgZoom {
    height: 300;
}
img#imgZoom:hover {
    position: relative;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    z-index: 1000;
}
```
Vous pouvez également ajouter cette une cool effet de transition:
```
* {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
```
*En outre, vous pouvez appliquer la même logique, non seulement pour les images, mais pour les divs.

Je vais donner à ceci un essai maintenant!
J'ai ajouté un JSFiddle si vous voulez le voir en direct.
C'est incroyablement utile. Hormis qu'il refuse de transition sur ma fin, c'est très joli et pourrait en fait être tout ce dont j'ai besoin. Je vais courir ce par mon employeur et de voir ce qu'il en pense! Merci!!!!

OriginalL'auteur Amit

Vous devez vous connecter pour publier un commentaire.