使用jQuery增加和减少页面的规模

Increasing and decreasing scale of the page with jQuery

本文关键字：jQuery 增加 使用      更新时间：2023-09-26

我已经在我的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;
            }
        });
  });
有人能帮我吗?

谢谢

查看此处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);
    });
})();

浏览器处理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 */

你需要一种方法来处理它们。(属性列表无耻地从这个线程窃取:跨浏览器CSS缩放的完整样式)

将类更改为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 + '%');
            }
        }
    });

相关文章：