Plugin jQuery pour simuler navigateur la page de zoom/zoom de texte?

Je suis à la recherche d'un plugin jquery pour faire un texte de zoom /zoom de la page d'effet (comme FF 3 ctrl++/ctrl--), qui peut...

  1. de redimensionner le texte avec différentes polices de réglage de la taille (c'est à dire le texte de zoom /zoom de la page)
  2. de travail complexes HTML+CSS structure

Toute recommandation ici?

peut-être "simuler" pas de "stimuler" 🙂
zooMooz cela très bien, mais n'est complatible avec les navigateurs modernes. Voir ce page.

OriginalL'auteur | 2010-02-19

  1. 8

    Ensemble contentWidth à votre minimum requis largeur visible.

    jQuery(document).ready(function(){
    jQuery(window).bind('resize load', function(){
        contentWidth = 1010;
        jQuery('body').css('zoom', jQuery(window).width() / contentWidth);
    });
});

    Testé avec google Chrome.

    OriginalL'auteur Sergo Ulpus

  2. 4

    Si vous êtes à la recherche pour le texte de zoom, la meilleure façon de le faire serait de spécifier la base taille de la police sur votre body dans une unité absolue, par exemple body { font-size: 13pt; } et ensuite faire tout le reste d'utiliser des unités relatives, par exemple,.postTitle { font-size: 120%; }.

    Alors, si vous avez +/- zoom liens ou autres joyeusetés:

    $('#enlargeText').cliquez sur(function () { 
$(document.corps).css('font-size', $(document.corps).css('font-size') * 1.5); 
}

    Cela permettra d'accroître toutes les tailles de police relatives à body.

    Toutefois, si vous voulez simuler zoom de la page (par opposition à un texte de zoom), vous devez également avoir à spécifier les dimensions de l'image en unités relatives, ou d'une boucle à travers toutes les images et de les redimensionner en conséquence:

    $('#enlargeText').cliquez sur(function () { 
$('img').each(function () { 
c'.largeur *= 1.5; 
}) 
}

    Mais alors, vous êtes toujours coincé avec le CSS, les images de fond, qui n'ont pas été redimensionnée. Autant que je sache, ce n'est possible à l'aide de CSS 3 qui n'est pas pris en charge, ou par le fait d'avoir redimensionné les versions de toutes les images sur le serveur. Vous pouvez ensuite, il suffit d'activer une nouvelle feuille de style qui fait référence à ces grandes/petites images.

    C'est ma dernière solution... (trop de lignes et l'héritage complexe) en Fait je suis en train de travailler pour un plugin jquery que la solution, mais Il peut ne pas être une bonne solution, comme il l'aide de l' * sélecteur...vous pouvez prendre un coup d'oeil ici: jsbin.com/egutu3 mais je pense que ton post va rappeler à tout le css de l'auteur de porter une attention particulière quand ils veulent leur texte à être redimensionnables. Merci!!!!
    Votre syntaxe est mauvaise, il convient de: $.chaque('img', function () { this.largeur *= 1.5; }
    il y a deux each fonctions jQuery. Celui que j'ai utilisé <api.jquery.com/each> appelle la fonction spécifiée pour chaque élément dans le jQuery, autrement dit, pour chaque img. Le second <api.jquery.com/jQuery.each>, que vous semblez faire allusion, appelle une fonction à chaque élément d'un tableau ou d'une propriété d'un objet. Cependant, 'img' est une chaîne fixe, n'est pas une collection d'images. Veuillez expliquer votre downvote et comment mon exemple est de faire la mauvaise chose, et comment la vôtre ne l'est pas. (Note que j'ai eu un manque de fermeture ")", qui a maintenant été ajouté.)

    OriginalL'auteur janmoesen

  3. 3

    Vous pourriez le faire de cette façon. Il a besoin de se connecter à un cookie pour les pages suivantes si

    var currZoom = $("body").css("zoom");
if(currZoom == 'normal') currZoom=1; //For IE

$(".zoomIn").click(function(){
    currZoom*=1.2;
    $("body").css("zoom",currZoom);
});
$(".zoomOff").click(function(){
    jQuery("body").css("zoom",1);
});
$(".zoomOut").click(function(){
    currZoom*=.8;
    $("body").css("zoom",currZoom);
});

    HTML

    <span class="zoomIn" style="font-size:120%">A</span>
<span class="zoomOff">A</span>
<span class="zoomOut" style="font-size:80%">A</span>
    La légende. Vous êtes un épargnant de vie.

    OriginalL'auteur Neil Turner