Javascript: Zoom-in auf mouseover OHNE Jquery-plugins

Ist, habe ich mich für diese überall seit Wochen, und ich kann einfach nicht finden, mir etwas zu sagen, was ich falsch mache oder wie man auch gehen. Das Ziel ist, erstellen Sie eine Funktion, ähnlich wie Amazon vergrößern mouseover für Produkte mit kleinen Bildern.

Ich bin derzeit ratlos, wie Sie Vorgehen, obwohl ich mir bewusst bin, dass ich benötigen zwei Bilder - eines in der "zoomed in" - Größe und eines in der "zoomed out" - Größe. Ich bin nicht mit Jquery- ich kann es installieren, oder irgendwelche plugins auf die website über meinen Arbeitgeber den Antrag. Ich bin im Grunde Fragen, für die härtere Antwort, und ich entschuldige mich dafür im Voraus. Ich muss dazu moderate Kratzer. Warnung: ich bin ein Programmier-Student. Nehmen, dass, wie Sie.

Ich habe HTML-und CSS-Skript, und da wir nicht wirklich eine IDE hier ich bin dabei auf codecademy Projekt, Abschnitt, ansonsten müsste ich es Programmieren ganz zu Leben. Sie finden mein code hier, aber ich werde auch nach dem code unten, wie die Verknüpfung gebunden ist, um code ändern, da es verwendet prozeduralen speichern.

Hinweis: ursprünglich hatte ich es so, dass die graue box war Folgendes meine Maus in der relativen Mitte. Es war ein flackern, wie es sich bewegt, aber es hat funktioniert. Derzeit aber ist es entschieden, zumindest auf meinem Arbeits-computer. Ich habe es nicht getestet auf meinem persönlichen computer.

Edit: Der code funktioniert auf meinem Surface Pro 3, obwohl es nicht verfolgen und die Maus aus dem Bild (was ist temporär und etwas zufällige Griff ich). Ich bin mir nicht sicher, warum der code nicht funktioniert auf meinem computer in der Arbeit, obwohl es wahrscheinlich, weil es ein Macintosh OSX version 10.6.8...

HTML-Code:

<!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";
}

jQuery erfordert keine installation, seine nur, wie das hochladen oder das Hinzufügen von Dateien auf web-server oder wenn Sie nicht wollen, das einfügen von script-tag mit src vom jQuery CDN oder seiner website <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js" type="text/javascript"></script>
Sorry, ich dachte, JQuery benötigt einiges an installation, vor allem, wenn Sie verwenden möchten Dinge wie Bootstrap. Wo ich zur Schule für die Programmierung, die meisten meiner Lehrer haben davor gewarnt, uns nicht darauf zu verlassen, JQuery, da es mehr eine Krücke als eine todsichere Antwort - nicht, dass JQuery ist eine schlechte Sache, es ist gerade als student versuche ich zu lernen, die die volle Methode. Ich nehme an, das ist hauptsächlich der Grund, warum ich nicht wollen, es zu benutzen, so dass ich lernen kann, wie man es manuell tun. Ich bin eigentlich hauptsächlich ein Programmierer für Videospiele, so lächerlich schwierig-code, kein Helfer ist in der Regel, was ich den ganzen Tag machen
Ich Stimme mit Ihnen überein, da Sie lernen, Sie haben ein Recht zu wissen, wie die Dinge gemacht sind von es-core, aber in Zukunft daran denken, das Rad neu erfinden ist schlecht, wo Sie arbeiten in der Zeit-Einschränkung, wenn Sie können es leicht tun mit etwas Werkzeug, becoz, die Sie nicht wissen, Wann Sie Ihre Sachen zu brechen
oh absolut, ich gar nicht bestreiten. Sie warnen uns vor, dass auch. Zum Glück mein Arbeitgeber ist daran interessiert, dass es funktioniert auf seine eigene, als auch - das ist mehr eine entry-level-position, und sehr lax auf, wie Dinge getan werden, also nehme ich meine Zeit, um glatt zu arbeiten. Später, natürlich, einmal habe ich volles Verständnis, ich werde der Einsatz schneller Methoden! Geschwindigkeit ist immer der Schlüssel in jeder Branche

InformationsquelleAutor Kitfoxpup | 2015-11-19

können Sie tun es einfach durch das spielen von background-position beim überfahren mit der Maus einfach verschieben background-position bei mouseover DEMO

JS:

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

CSS:

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

HTML:

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

Das sieht fantastisch aus, ich werde versuchen, gibt dies einen run zu. Beide Möglichkeiten habe ich bisher erhalten sind fantastisch!
Ich habe versucht deinen code @CY5, aber ich bin immer ein Quadrat am unteren Rand des Bildes und dem vergrößerten Bild ist statisch und zeigt die oberen rechten Teil des tatsächlichen Bildes.
Dies funktioniert gut für mich. Warum kaufen manche online-tool, wenn es eine so einfache Lösung wie diese? Danke.

InformationsquelleAutor CY5

6

Dies 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;
}
```
Können Sie auch fügen Sie diese für einen coolen übergangseffekt:
```
* {
    -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;
}
```
*Auch Sie können anwenden der gleichen Logik nicht nur für Bilder, sondern für die divs auch.
- Ich werde geben diesem einen Versuch jetzt!
- Ich habe ein JSFiddle, wenn Sie wollen, um zu sehen, es zu Leben.
- Das ist unglaublich hilfreich. Abgesehen davon, dass es sich weigert, um den übergang auf mein Ende, es sieht sehr schön und könnte eigentlich alles was ich brauche. Ich werde dies ausführen, von meinem Arbeitgeber und sehen, was er denkt! Danke!!!
InformationsquelleAutor Amit

JS:

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

CSS:

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

HTML:

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

InformationsquelleAutor Ghufran Khalil

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.