使用 jQuery 增加和减少页面的比例答案

【问题标题】：Increasing and decreasing scale of the page with jQuery使用 jQuery 增加和减少页面的比例
【发布时间】：2014-10-15 04:54:15
【问题描述】：

我在我的 html 代码中创建了两个按钮

<a href="#" class="increase">+</a>
<a href="#" class="decrease">-</a>

我想要做的是点击按钮并缩放页面

我开发了一个 jquery 脚本，但它只适用于 chrome

  $(".decrease").click(function () {
        $("body").css('zoom',function (index,value) {
            if(value < 0.8){
                return value;
            } else {
                return parseFloat(value) - 0.1;
            }
        });
  });

  $(".increase").click(function () {
        $("body").css('zoom',function (index,value) {
            if(value > 1.2){
                return value;
            } else {
                return parseFloat(value) - 0.1;
            }
        });
  });

谁能帮帮我？

谢谢

【问题讨论】：

在大多数常见浏览器中，您无法真正“放大”或“缩小”。您所能做的就是更改 CSS 的缩放级别，SO 中有很多关于它的主题。
我其实想改变css中的zoom属性，但它只适用于chrome
好的，这就是答案，它应该可以工作！

标签： javascript jquery html css

【解决方案1】：

在这里查看 jsfiddle - http://jsfiddle.net/1totyrhj/

此变体适用于所有现代浏览器。

JavaScript

(function () {
    var currentScale = 1,
        cssPrefixesMap = [
            'scale',
            '-webkit-transform',
            '-moz-transform',
            '-ms-transform',
            '-o-transform',
            'transform'
        ];

    function setScale(scale) {
        var scaleCss = {};

        cssPrefixesMap.forEach(function (prefix) {
            scaleCss[prefix] = 'scale(' + scale + ')';
        });

        $('div').css(scaleCss);
    }

    $(".decrease").click(function () {
        setScale(currentScale = currentScale - 0.1);
    });

    $(".increase").click(function () {
        setScale(currentScale = currentScale + 0.1);
    });
})();

【讨论】：

它看起来不像缩放，我试图改变 $('div').css(scaleCss);到 $('html').css(scaleCss);但是还是不好看
当然不是。当您将其更改为 html 或 body 时，它也会使用您的控件缩放所有内容。
scale() 的行为与缩放不同？
@user3722632 是的，您可以通过搜索“缩放与缩放”来了解这一点。你会得到很多关于这个的文章。

【解决方案2】：

浏览器处理 CSS 缩放的方式有很多种，例如在进行 x2 缩放时：

zoom: 2; /* IE */
-moz-transform: scale(2); /* Firefox */
-moz-transform-origin: 0 0;
-o-transform: scale(2); /* Opera */
-o-transform-origin: 0 0;
-webkit-transform: scale(2); /* Safari And Chrome */
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0;  /* Standard Property */

您需要一种方法来处理所有这些问题。（本帖无耻盗取房产清单：complete styles for cross browser CSS zoom）

【讨论】：

【解决方案3】：

为你的班级更改一个 ID，然后试试这个：

    var currFFZoom = 1;
    var currIEZoom = 100;

    $('#increase').on('click',function(){
        if ($.browser.mozilla){
            if(currFFZoom < 1.2)
            {
            var step = 0.2;
            currFFZoom += step; 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');
            }
        } else {
            if(currIEZoom < 120)
            {
            var step = 20;
            currIEZoom += step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
        }}
    });

    $('#decrease').on('click',function(){
        if ($.browser.mozilla){
             if(currFFZoom > 0.8)
            {
            var step = 0.2;
            currFFZoom -= step;                 
            $('body').css('MozTransform','scale(' + currFFZoom + ')'); }

        } else {
            if(currIEZoom > 80)
            {
            var step = 20;
            currIEZoom -= step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
            }
        }
    });

编辑：适应一定规模（最小/最大）后的块。

【讨论】：

我得到这个错误 Uncaught TypeError: Cannot read property 'mozilla' of undefined (index):635