模拟浏览器页面缩放/文本缩放的jQuery插件？

Question

我正在寻找一个jQuery插件来实现文本缩放/页面缩放效果（类似于Firefox 3的ctrl++ / ctrl--），它可以...

1. 使用不同的字体大小设置调整文本大小（即文本缩放/页面缩放）

2. 与复杂的HTML+CSS结构一起使用

这里有什么推荐吗？

- vinci

---

可能是“模拟”而不是“刺激” :) - user57508

zooMooz 做得非常好，但只兼容现代浏览器。请参见此页面。 - user1160829

Answer 1

将contentWidth设置为您要求的最小可见宽度。

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

已在Chrome浏览器中测试。

- Sergo Ulpus

Answer 2

如果您想要进行文本缩放，最简单的方法是在body中使用绝对单位指定基础字体大小，例如 body { font-size: 13pt; }，然后让其他所有内容使用相对单位，例如 .postTitle { font-size: 120%; }。

然后，如果您有+/-缩放链接或其他内容：

$('#enlargeText').click(function () {
    $(document.body).css('font-size', $(document.body).css('font-size') * 1.5);
}

这将增加所有相对于body的字体大小。

但是，如果您想模拟页面缩放（而不是文本缩放），则还必须使用相对单位指定图像尺寸，或循环遍历所有图像并相应地调整其大小：

$('#enlargeText').click(function () {
    $('img').each(function () {
        this.width *= 1.5;
    })
}

但是，这样您仍然无法调整CSS背景图像的大小。据我所知，只有使用不被广泛支持的CSS 3或者在服务器上拥有调整过大小的所有图像的版本才能实现。然后，您可以激活一个新的样式表，引用那些更大/更小的图像。

- janmoesen

---

这是我的最后解决方案...（太多行和复杂的继承）实际上，我正在为一个jQuery插件工作，作为解决方案，但它可能不是一个好的解决方案，因为它使用了*选择器...你可以在这里看一下： http://jsbin.com/egutu3/但我认为你的帖子会提醒所有的CSS作者，在他们想要调整文本大小时要特别注意。谢谢！ - vinci

你的语法有误，应该是：$.each('img', function () { this.width *= 1.5; } - Rick

@Rick：jQuery中有两个each函数。我使用的那个http://api.jquery.com/each/会为jQuery集合中的每个元素（即每个img）调用指定的函数。而你提到的第二个函数http://api.jquery.com/jQuery.each/则会为数组的每个元素或对象属性调用一个函数。然而，'img'是一个固定的字符串，不是一组图像。请解释一下你的反对意见，以及我的示例做错了什么，你的示例又是如何正确的。（请注意，我确实漏掉了一个闭合的“)”符号，现在已经添加上了。） - janmoesen

Answer 3

你可以像这样做。不过需要将其与cookie连接起来以便后续页面使用。

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>

- Neil Turner

---

传奇。你是一个救命稻草。 - Scully