html-zoom bei mouseover

Ich möchte ein Foto in eine Website, und wenn ich die Maus über, ich möchte eine kleine Lupe zoom-Effekt.

Kann ich das in html mit Leinwand oder so? javascript vielleicht?

danke

InformationsquelleAutor pvinis | 2011-02-09
  1. 2

    Canvas wird nicht unterstützt von IE ohne third-party-plugins. Sie wollen, dies zu tun in JavaScript. mit jQuery lässt sich dies sehr einfach und sauber. Bind Handler für den hover-in /out-Ereignisse für das Bild-element, das Sie vergrößern möchten, mit .hover(). "Binding-Handler" bedeutet einfach, Sie passieren zwei Funktionen zu .hover() wird ausgeführt, wenn der Benutzer mit der Maus ein und aus, beziehungsweise. Diese Funktionen verwenden animate(), die Sie übergeben Sie einfach eine neue Größe.

    Haben Sie einen Blick auf die Dokumentation für .animieren() und .hover(). Wenn Sie völlig neu für jQuery, schauen Sie sich die tutorials.

    InformationsquelleAutor Ori
  2. 3

    Schließen Sie Ihr Foto in ein div-Element und fügen Sie Zoom via CSS über hover. Sie können möchten, erhöhen Sie den z-index auf hover. Sie können hinzufügen, die unter CSS, um die vergrößerten Fotos Aussehen/style besser. Wenn Sie nicht wollen, das Rad neu zu erfinden, schauen Sie sich für einige Jquery-plugin, das kann das gleiche erreichen, in einer eleganten Art und Weise mit weniger Aufwand.

    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>
    InformationsquelleAutor Piyush Mattoo
  3. 2

    Können Sie zeigen das Bild in einem div als hintergrund-Bild und ändern Sie die position mit einem kleinen javascript.

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

    • schön! danke! .
    • wie würde man gehen über die der zoom-Bereich kreisförmig mit jQZoom?
    • Ich habe geschrieben eine Antwort hier: stackoverflow.com/questions/5856381/...
    • es wäre weniger verwirrend, wenn Sie hatte, es hier zu setzen! Aber danke 🙂
    • ah... mein Fehler. Ich nahm an, es wurde auch über jQZoom
    InformationsquelleAutor Wolph
  4. 2

    Ich glaube, ich habe gefunden, was Sie wollen: loupe.js. Von dem, was ich gesehen habe, es ist eines der am besten aussehende Lupe/Vergrößerungsglas-Effekte.

    InformationsquelleAutor Dave O.
  5. 0

    Fand ich einige relativ Beispiel, so besuchen Sie diese:

    1. B. in ajax-zoom-website.
    2. anderen Beispiel: Zoom-Effekt (Karibik),Frame-Effekt (Mona Lisa),X-Ray-Effekt (Homer),Druck-Effekt (G5) .
    3. GOOOOOOOOOGLE 🙂
    • Während die links, die Sie zur Verfügung gestellt haben, können die Frage beantworten, es ist am besten, um die wesentlichen Teile der Lösung direkt in die Antwort im Fall der verbindungen läuft in der Zukunft.
    InformationsquelleAutor Hamid
Schreibe einen Kommentar