Comment puis-je pan/zoom contenu HTML? (ie. Google Maps, WordSquared)

Je suis à la recherche de pan/zoom contenu HTML sur une page, un peu comme Mot^2 (wordsquared.com) mais je ne peux pas trouver un plugin jQuery ou autre chose pour vous aider. Suis-je surplombant quelque chose de simple? Je ne suis vraiment pas sûr où commencer.

Ctrl + Molette de la souris jusqu'va le faire 🙂
Ooh, ce serait amusant à faire 😀
il veut dire avec la souris, comme dans google maps..
oh mon dieu que ce serait une très mauvaise idée.

OriginalL'auteur User1578 | 2011-03-31

  1. 0

    http://jqueryui.com/demos/draggable/

    WordSquared.com utilise jQuery UI et des ruisseaux dans notre contenu, lorsque le déplacement se termine si la vue a besoin d'être rafraîchi.

    Nous glisser et de stopper les événements dans "déplaçable" pour effectuer ces contrôles et de mettre à jour le contenu.

    Le zoom est effectivement mis en œuvre (ou non) par les navigateurs et un peu de marche.
    Pour obtenir de google maps-ish mise en œuvre, vous devrez avoir les détails de l'image les niveaux et les mélanger entre eux. Vous ne pouvez pas attraper le navigateur 'zoom' événement, mais vous pouvez obtenir les événements qui déclenchent le navigateur de zoom (molette de la souris, multitouch-- la recherche de plugins jquery) et de faire le zoom personnalisée de travail vous-même.

    OriginalL'auteur seanmakesgames

  2. 9

    Tandis que contrairement à Word^2 et Google Maps, en fonction de vos exigences de ce plugin vient de sortir pour jQuery pourrait être exactement ce que vous cherchez:

    Zoomooz.js

    Super plugin... Merci...:)

    OriginalL'auteur mVChr

  3. 4

    Vous pouvez obtenir l'effet panoramique avec certains événements et un peu de mathématiques.

    Permet de supposer que vous avez le contenu de la page est plus large et plus haut que la fenêtre. Le navigateur va afficher les barres de défilement, de sorte que l'utilisateur peut voir l'ensemble du contenu en déplaçant les barres de défilement. Ce que vous pouvez faire pour rendre l'effet panoramique est de masquer les barres de défilement et de joindre certains événements, de sorte que lorsque l'utilisateur fait glisser n'importe où sur le document, vous en fait par programmation à déplacer les barres de défilement.

    Ici est un jsfiddle exemple (évidemment besoins des améliorations): http://jsfiddle.net/jFQEW/4/

    Vous pouvez masquer les barres de défilement en mettant un overflow: hidden sur votre élément de contenu, et vous pouvez déplacer les barres de défilement avec .scrollLeft et .scrollTop

    Excellent!! Que diriez-Contenu de l'iFrame Scrolling ? Pouvons-nous atteindre le même effet Panoramique pour le contenu de l'iframe ? Je suis à la recherche d'une solution pour cette question, stackoverflow.com/questions/8802450/...

    OriginalL'auteur Daniel

  4. 1

    Techniquement il s'agit de ne pas être "zoomée". Ces pages ont d'événements Javascript auditeurs que "l'écoute" de certains événements tels que la molette de la souris mouvement qui, lors de leur lancement, va exécuter des fonctions qui changent dynamiquement les attributs du contenu sur la page. Google maps par exemple les variations des dimensions des images, et puis, quand le "zoom" de l'effet est terminé, il remplace les images avec une plus grande résolution.

    OriginalL'auteur Joshua

  5. 0

    Si vous définissez les largeurs, hauteurs, de rembourrage et de la marge dans les ems, alors vous pouvez réduire et agrandir les éléments en changeant le conteneur parent taille de la police avec les boutons + /- et certains JavaScript simple fonctionnalité.

    OriginalL'auteur martinedwards

  6. -1

    Pour le zoom vous pouvez utiliser:

    $("#drawing").css("-webkit-transform","scale(0.75)");   //chrome

    ou

    $("#drawing").css("zoom",75%); //CSS3
    Edit: toutes mes Excuses, je me suis trompé, le zoom est pris en charge dans au moins modernes navigateurs Webkit. Texte Original: le Zoom est seulement une propriété valable sur IE7 et ci-dessous. Certainement pas en CSS3.

    OriginalL'auteur Wojciech