webentwicklung-frage-antwort-db.com.de

Wie füge ich die Zoom-Funktion für alle HTML-Tags hinzu?

Was ist der einfachste Weg, um alle Bilder in einem HTML-Dokument (img-Tags) durch Klicken vergrößern oder verkleinern zu können?

Ich bearbeite ein Dokument in HTML und möchte mich auf den Inhalt dieses Dokuments konzentrieren. Aus diesem Grund würde ich es eher vermeiden, zusätzliche div-Elemente um img-Element hinzuzufügen, zumindest im Quelldokument.

Gibt es ein einfaches Javascript-Modul, das ich zu diesem Zweck einfach einbinden kann?

Zu klären. Einfach:

        img:hover {
            height: 400px;
        }

würde fast den Job für mich erledigen, aber:

  1. es knackt das Layout
  2. arbeitet mit hover und ich würde lieber auf click arbeiten.

Basierend auf Paulie_D Antwort hier ist was ich schließlich mit kam:

Funktioniert gut in Chrome & IE9. Ich habe versucht, dieses Skript der Antwort von Paulie_D hinzuzufügen, aber meine Bearbeitung wurde dort abgelehnt - hier also:

<style>
        img {
            cursor: pointer;
        transition: -webkit-transform 0.1s ease
        }
    img:focus {
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        var imgs = document.querySelectorAll('img');
        Array.prototype.forEach.call(imgs, function(el, i) {
            if (el.tabIndex <= 0) el.tabIndex = 10000;
        });
    });
</script>
javascriptjqueryhtmlcss
8
agsamek

Alles, was die Höhe des Bildes verändert, kann Ihr Layout beschädigen.

Dementsprechend sollten Sie sich (IMO) transform: scale(x) anschauen.

JSFiddle Demo (mit: aktiv als Mausedown - einfach klicken und halten)

CSS 

img {
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}

img:active {
    -webkit-transform: scale(2);
    transform: scale(2);
}
21
Paulie_D

addiere Zoom in/out auf alle Bilder in einem HTML-Dokument (img-Tags)

Diese Geige sehen

JQuery

$('img').each(function(){
    $(this).click(function(){
        $(this).width($(this).width()+$(this).width())
    });
});

Der obige Code fügt allen img-Tags die Zoomfunktion hinzu.

2
Zword

Es gibt viele jQuery-Plugins zum Zoomen der Bilder. Wenige sind

http://plugins.jquery.com/image-zoom/

http://www.elevateweb.co.uk/image-zoom/examples

0
Vinoth