web-dev-qa-db-fra.com

Javascript: zoom sur le survol de la souris SANS Jquery ou plugins

Cela fait des semaines que je cherche cela partout et je ne trouve tout simplement rien qui puisse me dire ce que je fais de mal ou même comment procéder. L'objectif est de créer une fonction similaire au zoom avant d'Amazon pour les produits avec de petites images.

Je ne sais pas trop comment procéder, même si je suis conscient du fait que je vais avoir besoin de deux images, une de la taille "zoomée" et une de la taille "zoomée". Je n'utilise pas Jquery - Je ne peux pas l'installer ni aucun plugin sur le site Web à la demande de mon employeur. Je demande essentiellement la réponse plus difficile, et je m'en excuse par avance. Je dois le faire à partir de zéro. Avertissement: Je suis un étudiant en programmation. Prends ça comme tu veux.

J'ai un script HTML et CSS, et comme nous n'avons pas de IDE ici, je le fais dans la section de projet de codecademy, sinon je devrais le programmer complètement en direct. Vous pouvez trouver mon code ici , mais je vais aussi poster le code ci-dessous, car ce lien est lié à un code changeant puisqu'il utilise la sauvegarde procédurale.

Remarque: je l'avais à l'origine de sorte que la case grise suivait ma souris au centre relatif. Il clignotait au fur et à mesure qu'il bougeait, mais cela fonctionnait. Actuellement, il a été décidé de ne pas le faire, du moins sur mon ordinateur de travail. Je ne l'ai pas testé sur mon ordinateur personnel.

Edit: Le code fonctionne sur ma Surface Pro 3, bien qu’il suive la souris hors de l’image (temporaire et quelque chose d’aléatoire que j’ai récupéré). Je ne suis pas sûr de savoir pourquoi le code ne fonctionne pas sur mon ordinateur de travail, bien que cela soit probable car il s'agit d'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";
}
javascripthtmlcsszoommouseover
11
Kitfoxpup

vous pouvez simplement le faire en jouant la position de l’arrière-plan au passage de la souris, en déplaçant simplement la position de l’arrière-plan au passage de la souris DEMO

function zoomIn(event) {
  var element = document.getElementById("overlay");
  element.style.display = "inline-block";
  var img = document.getElementById("imgZoom");
  var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
  var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
  element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px";

}

function zoomOut() {
  var element = document.getElementById("overlay");
  element.style.display = "none";
}
#overlay {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  display: inline-block;
  background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg');
  background-repeat: no-repeat;
}
<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn(event)"></div>

25
CY5

Cela fonctionne pour moi: (Voici 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 ceci pour un effet de transition cool:

* {
    -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;
}

* Vous pouvez également appliquer la même logique non seulement pour les images, mais également pour les div.

4
Amit

function zoomIn(event) {
  var element = document.getElementById("overlay");
  element.style.display = "inline-block";
  var img = document.getElementById("imgZoom");
  var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
  var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
  element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px";

}

function zoomOut() {
  var element = document.getElementById("overlay");
  element.style.display = "none";
}
#overlay {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  display: inline-block;
  background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg');
  background-repeat: no-repeat;
}
<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn(event)"></div>

0
Ghufran Khalil