html-Zoom beim Überfahren mit der Maus

Question

Ich möchte ein Foto auf einer Website haben, und wenn ich mit der Maus darüber fahre, möchte ich einen kleinen Lupeneffekt.

Kann ich dies in html mit Leinwand oder etwas tun? javascript vielleicht?

Dankeschön

Answer 1

Schließen Sie Ihr Foto in ein Div ein und fügen Sie Vergrößern über CSS bei Hover. Vielleicht möchten Sie den z-index beim Hovern erhöhen. Sie können das unten stehende CSS hinzufügen, um das gezoomte Foto besser aussehen zu lassen/zu stylen. Wenn Sie das Rad nicht neu erfinden wollen, halten Sie Ausschau nach einem Jquery-Plugin, das dasselbe auf elegante Weise und mit weniger Aufwand erreichen kann.

CSS:

#div-1 {
            position: absolute;
        }
#div-1.hover {
            position: absolute; zoom: 70%; border: solid 1px; z-index:10;
        }

Jquery/Javascript:

          <script type = "text/javascript"> 
$(document).ready(function() {
$(".div-1").onmouseover(function() {
    toggle_visibility('div-1');
})

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if ($(e).hasClass("hover")) {
        $(e).removeClass("hover");
    } else {
        $($(e)).addClass("hover");
        $($(e)).attr({
            width: "100%",
            height: "100%"
        });
    }
}}); < /script>

Answer 2

Sie können das Bild in einem Div als Hintergrundbild anzeigen und die Position mit ein wenig Javascript ändern.

Hier finden Sie eine Bibliothek mit einigen Beispielen: http://www.mind-projects.it/projects/jqzoom/demos.php

Answer 3

Canvas wird von IE ohne Plug-ins von Drittanbietern nicht unterstützt. Sie werden dies in JavaScript tun wollen. jQuery macht dies sehr einfach und sauber. Binden Sie Handler für die Hover-Ereignisse für das Bildelement, das Sie zoomen möchten, mit .hover() . "Binding Handlers" bedeutet einfach, dass Sie zwei Funktionen an .hover() übergeben, die ausgeführt werden, wenn der Benutzer den Mauszeiger nach innen bzw. nach außen bewegt. Diese Funktionen verwenden animate() die Sie einfach mit einer neuen Größe versehen können.

Werfen Sie einen Blick in die Dokumentation für .animieren() y .hover() . Wenn Sie völlig neu in jQuery sind, Sehen Sie sich die Tutorials an .

Answer 4

Ich glaube, ich habe gefunden, was Sie suchen: loupe.js . Nach dem, was ich gesehen habe, ist es einer der am besten aussehenden Lupen-/Vergrößerungsglaseffekte.

Answer 5

Ich habe einige einschlägige Beispiele gefunden, also besuchen Sie diese:

1. Beispiel in ajax-zoom Website .
2. eine andere Beispiel: Zoom-Effekt (Karibik), Rahmen-Effekt (Mona Lisa), Röntgen-Effekt (Homer), Druck-Effekt (G5) .
3. GOOOOOOOOOOOGLE :)