Javascript: Zoomen Sie auf mouseover OHNE Jquery oder Plugins

7

Ich habe wochenlang überall danach gesucht, und ich kann einfach nichts finden, was mir sagt, was ich falsch mache oder wie ich weiter vorgehen soll. Das Ziel ist es, eine ähnliche Funktion wie Amazon beim Mouseover für Produkte mit kleinen Bildern zu erstellen.

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 Jquery nicht - Ich kann es auf der Anfrage meines Arbeitgebers nicht installieren oder irgendwelche Plugins auf der Website installieren. 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-Skripte, und da wir eigentlich keine IDE haben, mache ich das in der Projektabteilung von codecademy, sonst müsste ich das komplett live programmieren. Sie können meinen Code hier finden, aber ich werde auch den unten stehenden Code posten, da dieser Link zwangsläufig sein muss Ändern von Code, da es prozedurales Speichern verwendet.

Hinweis: Ich hatte es ursprünglich so, dass die graue Box meiner Maus in der relativen 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.

Bearbeiten: Der Code funktioniert auf meinem Surface Pro 3, obwohl er der Maus von dem Bild folgt (was temporär ist und etwas zufälliges, das ich gegriffen habe). Ich bin nicht sicher, warum der Code auf meinem Arbeitscomputer nicht funktioniert, obwohl es wahrscheinlich ist, weil es eine Macintosh OSX Version 10.6.8 ist ...

HTML-Code :

%Vor%

CSS-Code :

%Vor%

JavaScript-Code :

%Vor%     
Kitfoxpup 19.11.2015, 17:56
quelle

2 Antworten

19

Sie können es einfach tun, indem Sie die Hintergrundposition bei Mouse-Over spielen, indem Sie einfach die Hintergrundposition bei mouseover DEMO verschieben / p>

%Vor% %Vor% %Vor%
    
CY5 19.11.2015, 18:40
quelle
3

Das funktioniert für mich: (Hier ist ein JSFiddle )

%Vor%

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

%Vor%

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

    
Amit 19.11.2015 18:09
quelle

Tags und Links