wake-up-neo.net

Javascript: Zoomen Sie mit der Maus über OHNE Jquery oder Plugins

Ich habe das seit Wochen überall gesucht und kann einfach nicht finden, was ich falsch mache oder wie ich überhaupt vorgehen sollte. Das Ziel ist es, eine Funktion zu schaffen, die der von Amazon mit der Funktion "Vergrößern" bei Produkten mit kleinen Bildern ähnelt.

Ich bin im Moment unschlüssig, wie ich vorgehen soll, obwohl ich mir bewusst bin, dass ich zwei Bilder benötigen werde - eines in der Größe "Heranzoomen" und eines in der Größe "Herausgezoomt". Ich benutze Jquery nicht - ich kann es oder die Plugins der Website nicht auf Anfrage meines Arbeitgebers installieren. Ich frage grundsätzlich nach der schwierigeren Antwort und entschuldige mich dafür im Voraus. Ich muss das von mäßig kratzen. Warnung: Ich bin ein Programmstudent. Nimm das wie du willst.

Ich habe HTML- und CSS-Skript, und weil wir hier nicht wirklich eine IDE haben, mache ich dies im Projektabschnitt der Codecademy, sonst müsste ich das komplett live programmieren. Sie können meinen Code hier finden, aber ich werde den Code auch hier posten, da dieser Link zwingend geändert werden muss, da er prozedurales Speichern verwendet.

Hinweis: Ich hatte es ursprünglich so, dass der graue Kasten meiner Maus in relativer Mitte folgte. Es flackerte, als es sich bewegte, aber es funktionierte. Momentan hat es sich aber dazu entschieden, zumindest auf meinem Arbeitscomputer. Ich habe es nicht auf meinem PC getestet.

Bearbeiten: Der Code funktioniert auf meinem Surface Pro 3, obwohl er der Maus außerhalb des Bildes folgt (was temporär ist und etwas, das ich zufällig getroffen habe). Ich bin nicht sicher, warum der Code auf meinem Arbeitscomputer nicht funktioniert, obwohl dies wahrscheinlich ist, weil es sich um eine Macintosh OSX-Version 10.6.8 handelt.

HTML Quelltext:

<!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>

CSS-Code:

#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;
}

Javascript-Code:

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";
}
11
Kitfoxpup

sie können dies einfach tun, indem Sie die Hintergrundposition beim Mouseover spielen, indem Sie die Hintergrundposition beim Mouseover verschieben. 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

Das funktioniert für mich: (Hier ist ein 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;
}

Sie können dies auch für einen coolen Übergangseffekt hinzufügen:

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

* Sie können dieselbe Logik nicht nur für Bilder, sondern auch für divs anwenden.

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