使用jQuery缩小放大部分页面

  做个笔记

var zoomInOut = function (opts) {
        var cfg = {max:2,min:0.5,step: 0.05}
        $.extend(cfg,opts);
        /**
         * 缩小
         * @param {jQuery} domObj 容器
         */
        var zoomOut = function(domObj){
            var zoom = getZoomLevel(domObj);
            var width = domObj.width();
            var height = domObj.height();
            if(zoom > cfg.min){
                zoom -= cfg.step;
            }
            domObj.css({'transform':'translate('+(zoom-1)*width/2+'px, '+(zoom-1)*height/2+'px) scale('+zoom+')'});
        };
        /**
         * 放大
         * @param {jQuery} domObj 容器
         */
        var zoomIn = function(domObj){
            var zoom = getZoomLevel(domObj);
            var width = domObj.width();
            var height = domObj.height();
            if(zoom < cfg.max){
                zoom += cfg.step;
            }
            domObj.css({'transform':'translate('+(zoom-1)*width/2+'px, '+(zoom-1)*height/2+'px) scale('+zoom+')'});
        };
        /**
         * 获取放大/缩小倍数
         * @param el
         * @return {number}
         */
        var getZoomLevel = function(el) {
            var sys = getBrowserInfo();
            // 标示缩放的css属性
            var zoomPer, undefinedPer = 'none';
            if(sys.browser.indexOf('firefox')!==-1) {
                zoomPer = '-moz-transform';
            }
            else if(sys.browser.indexOf('ie')!==-1) {
                if(sys.ver === '9') {
                    zoomPer = '-ms-transform';
                } else {
                    zoomPer = 'zoom';
                    undefinedPer = 'normal';
                }
            }
            else {
                zoomPer = '-webkit-transform';
            }
            var getZoom = function(htmlEl) {
                var ret = 1;
                if($(htmlEl).css(zoomPer) && $(el).css(zoomPer)!==undefinedPer) {
                    if(sys.browser.indexOf('ie')!==-1 && sys.ver < 9) {
                        ret *= el.style.zoom;
                    } else {
                        var temp = $(el).css(zoomPer),
                            start = temp.indexOf('(') + 1,
                            end = temp.indexOf(',');
                        ret *= temp.substring(start, end);
                    }
                }
                return ret;
            }
            return getZoom(el);
        };
        /**
         * 获取浏览器信息
         * @return {{}}
         */
        var getBrowserInfo = function(){
            var info = {};
            var ua = navigator.userAgent.toLowerCase();
            var re =/(msie|firefox|chrome|opera|version).*?([\d.]+)/;
            var m = ua.match(re);
            info.browser = m[1].replace(/version/, "'safari");
            info.ver = +m[2];
            return info;
        };

        return {
            zoomOut:zoomOut,
            zoomIn:zoomIn
        }
    };

  使用时, 可以 new 一个 zoomInOut 然后调用, 也可以直接调用, 如:

// 1. new 一个
var a = new zoomInOut({step:0.5});
a.zoomIn($('.article')); // 这里可以写在事件里

//2. 直接调用
zoomInOut().zoomIn($('.article'));