Javascript: Zoomen Sie auf mouseover WITHOUT Jquery oder plugins

Ich habe seit Wochen überall nach diesem gesucht, und ich kann einfach nichts finden, um mir zu sagen, was ich falsch mache oder wie man sogar vorgeht. Ziel ist es, eine ähnliche Funktion wie Amazon beim Mouseover für Produkte mit kleinen Bildern zu erstellen.Javascript: Zoomen Sie auf mouseover WITHOUT Jquery oder plugins

Ich weiß derzeit nicht, wie ich vorgehen soll, obwohl mir bewusst ist, dass ich zwei Bilder benötige - eins in der Größe "gezoomt" und eins in der Größe "herausgezoomt". Ich benutze keine Jquery - Ich kann es nicht installieren oder irgendwelche Plugins auf der Website über die Anfrage meines Arbeitgebers. Ich bitte im Grunde um die härtere Antwort, und ich entschuldige mich dafür im Voraus. Ich muss das von mäßigem Kratzer machen. Warnung: Ich bin ein Programmierstudent. Nimm das wie du willst.

Ich habe HTML und CSS-Skript, und weil wir eigentlich keine IDE haben ich hier dieses Projekt Abschnitt auf Codecademy tut, sonst würde ich diese völlig Live programmieren müssen. Sie können meinen Code here finden, aber ich werde auch den Code unten veröffentlichen, da dieser Link Code ändern muss, da er prozedurales Speichern verwendet.

Hinweis: Ich hatte es ursprünglich so, dass die graue Box meiner Maus in relativer Mitte folgte. Es flackerte, als es sich bewegte, aber es funktionierte. Momentan ist es jedoch beschlossen, zumindest auf meinem Arbeitscomputer nicht. Ich habe es nicht auf meinem PC getestet.

Edit: Der Code funktioniert auf meinem Surface Pro 3, obwohl es folgt die Maus aus dem Bild (das ist vorübergehend und etwas zufälliges ich packte). Ich bin mir nicht sicher, warum der Code nicht auf meinem Computer funktioniert, obwohl es wahrscheinlich ist, weil es eine Macintosh OSX Version 10.6.8 ist ...

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

Quelle

2015-11-19 Kitfoxpup

jQuery erfordern die Installation nicht seine wie Hochladen oder Hinzufügen Dateien auf dem Webserver oder wenn Sie das nicht können, fügen Sie ein Skript-Tag mit src von jQuery CDN oder seiner Website '' – CY5

@ CY5 Tut mir leid, ich figu Red JQuery benötigt einige Installation, besonders wenn Sie Dinge wie Bootstrap verwenden möchten.Wo ich zur Schule gehe, haben mich die meisten meiner Ausbilder davor gewarnt, sich auf JQuery zu verlassen, da es eher eine Krücke als eine sichere Antwort ist - nicht, dass JQuery eine schlechte Sache ist, sondern nur ein Student, den ich versuche zu lernen Methode. Ich nehme an, das ist hauptsächlich der Grund, warum ich es nicht benutzen möchte, damit ich lernen kann, wie man es manuell macht. Ich bin eigentlich hauptsächlich ein Programmierer für Videospiele, so lächerlich schwieriger Code, der keine Helfer hat ist normalerweise das, was ich den ganzen Tag mache – Kitfoxpup

Ich stimme dir zu, da du lernst, du hast Recht zu wissen, wie die Dinge von dort aus gemacht werden, aber in Zukunft Denken Sie daran, das Rad neu zu erfinden ist schlecht, wo Sie in Zeitbeschränkung arbeiten, wenn Sie es leicht mit einem Werkzeug tun können, becoz Sie wissen nicht, wann Ihre Sachen brechen werden – CY5

Sie können es nur durch Hintergrund-Position mit der Maus darüber spielen nur mit der Maus darüber Hintergrund-Position bewegt 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>

Quelle

2015-11-19 18:40:35 CY5

Das sieht fantastisch aus, ich werde versuchen, das auch zu versuchen. Beide Optionen, die ich bisher erhalten habe, sind fantastisch! – Kitfoxpup

Ich habe versucht, Ihren Code @ CY5, aber ich bekomme ein Quadrat am unteren Rand des Bildes und das gezoomte Bild ist statisch und zeigt den oberen rechten Teil des eigentlichen Bildes. –

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

Sie können dies auch für einen Effekt kühlen Übergang hinzu:

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

* Außerdem können Sie die gleiche Logik gilt nicht nur für Bilder, aber auch für divs.

Quelle

2015-11-19 18:09:48 Amit

Ich werde es jetzt versuchen! – Kitfoxpup

Ich habe ein JSFiddle hinzugefügt, wenn Sie es live sehen wollen. – Amit

Das ist unglaublich hilfreich. Abgesehen davon, dass es sich weigert, zu meinem Ende überzugehen, sieht es sehr nett aus und könnte eigentlich alles sein, was ich brauche. Ich werde das bei meinem Arbeitgeber machen und sehen, was er denkt! Vielen Dank! – Kitfoxpup

Javascript: Zoomen Sie auf mouseover WITHOUT Jquery oder plugins

Antwort

Verwandte Themen