Question

我正在寻找一个jquery插件来进行文本缩放/页面缩放效果（如FF 3 ctrl ++ / ctrl--），这可以......

使用不同的字体大小设置（即文本缩放/页面缩放）调整文本大小
使用复杂的HTML + CSS结构

这里有什么建议吗？

Answer 1

将contentWidth设置为所需的最小可见宽度。

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

使用Chrome进行测试。

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背景图像。 AFAIK，只能使用不受广泛支持的CSS 3，或者通过在服务器上调整所有这些图像的大小。然后，您可以简单地激活一个引用那些更大/更小图像的新样式表。

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>

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

3 个答案: