Javascript Maus-Rad Zoomen für eine Web-Seite

Szenario :

  • Ich bin derzeit versuchen zu bauen ein armer Mann ist Google Maps mit Skripten und Dinge zu simulieren alle Funktionen.
  • Ich habe ein massives Bild, das ich in Scheiben geschnitten in Fliesen und display in einem
    Tabelle auf der web-Seite.
  • Fand ich ein script, welches einen Benutzer zum klicken
    und ziehen Sie zum navigieren auf der Karte.

Todo :

  • Nun brauche ich nur noch zu implementieren
    zoom.
  • Fand ich Skripte zum vergrößern einzelne Bilder, aber ich möchte in der Lage sein zu Zoomen die gesamte Seite aus, als ein einzelnes element.
    Da habe ich 100 Bilder Fliesen zum erstellen der Karte, es ist nicht praktisch, es zu tun für jede einzelne Scheibe.

    Gibt es eine Möglichkeit, dies zu tun?

    Der Seite, die ich bislang finden Sie unter http://minecraft.firedrakecreative.com,
    und klicken Sie dann auf die Miniaturansicht.
    Jede Hilfe ist sehr willkommen!

InformationsquelleAutor | 2012-01-19

  1. 1

    Werfen Sie einen Blick auf dieses Beispiel, es könnte Ihnen helfen.

    Im Grunde sind Sie gonna haben, um binden Sie das scroll-Ereignis und das Verhalten ändern. Das Beispiel nutzt CSS3-Transformationen, wenn das nicht für Sie arbeiten, weil es braucht, um zu arbeiten auf alten Browsern müssen Sie möglicherweise ändern Sie die Bilder-Größen. Aber immer noch werden von einigen Browsern nicht dargestellt werden die geänderte Größe des Bildes.

    Nur, um Ihnen einen Weg zu gehen, ist dies ein Beispiel von dem, was Sie tun können, unter Berücksichtigung Ihrer HTML-Seite einfügen:

    window.addEventListener('scroll',function(){
    var scrolled = window.scrollY / ( document.getElementById("Table_01").offsetHeight );
    console.log("window.scrollY: " + window.scrollY);
    console.log("scrolled: " + scrolled );
    var zoomLevels = 1; //change to have a different behavior
    var scale = Math.pow( 3, scrolled * zoomLevels);
    var images = document.getElementById("Table_01").getElementsByTagName("img");
    console.log("scale:" + scale);
    for(i=0;i<images.length;i++){
        images[i].width = Math.round(500/scale); //change 500 to your image size
        images[i].height = Math.round(500/scale); //change 500 to your image size
    }
},true);

    Können Sie sehen, diese DEMO in Aktion hier: http://jsfiddle.net/qG6qm/3/

    WICHTIG: bei dieser code funktioniert, müssen Sie ändern Sie Ihre table-tag aus:

    <table id="Table_01" width="5000" height="5000" boder="0" cellspacing="0" cellpadding="0">

    :

    <table id="Table_01" boder="0" cellspacing="0" cellpadding="0">
    Wow, das sieht viel zu kompliziert für meine Kompetenz, aber danke für den link! Es ist mir gegeben, einen neuen Suchbegriff zu versuchen.
    Ich habe die Antwort zu geben, ein wenig mehr Details über das, was zu tun ist.
    Vielen Dank für diese! Ich werde spielen, um mit ihm ein wenig, um es perfekt funktioniert, aber das ist im Grunde das, was ich brauchte. Nochmals vielen Dank!

    InformationsquelleAutor Karl Mendes

  2. 2

    Wenn Sie jQuery verwenden:

    $('domElement').bind('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta / 120 > 0) {
        alert('Up');
    } else {
        alert('Down');
    }
});

    InformationsquelleAutor David Slavík

Schreibe einen Kommentar