点击button缩放div，网页局部缩放

r囧r小猫 2022-03-21 04:42 453阅读 0赞

绑定button的onclick事件zoomOut，zoomIn。依赖于jquery。使用transform缩放 domObj

//缩小

zoomOut=function()\{  
    var zoom=getZoomLeve($('\#domObj'));  
    var thisWidth=$('\#domObj').width();  
    var thisHeight=$('\#domObj').height();  
    if(zoom>0.5)\{  
        zoom-=0.2;  
    \}  
    $('\#domObj').css('transform','translate('+(zoom-1)\*thisWidth/2+'px, '+(zoom-1)\*thisHeight/2+'px) scale('+zoom+')');  
\}

//放大

zoomIn=function()\{  
    var zoom=getZoomLeve($('\#domObj'));  
    var thisWidth=$('\#domObj').width();  
    var thisHeight=$('\#domObj').height();  
    if(zoom<2)\{  
        zoom+=0.2;  
    \}  
    $('\#domObj').css('transform','translate('+(zoom-1)\*thisWidth/2+'px, '+(zoom-1)\*thisHeight/2+'px) scale('+zoom+')');  
\}

//获取元素的放大/缩小倍数,区分浏览器

getZoomLeve = function(el) \{  
    var sys=getBrowserInfo();  
    function getBrowserInfo()\{  
        var Sys = \{\};  
        var ua = navigator.userAgent.toLowerCase();  
        var re =/(msie|firefox|chrome|opera|version).\*?(\[\\d.\]+)/;  
        var m = ua.match(re);  
        Sys.browser = m\[1\].replace(/version/, "'safari");  
        Sys.ver = m\[2\];  
        return Sys;  
    \}  
    //sys.browser得到浏览器的类型 sys.ver得到浏览器的版本  
    // 标示缩放的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 ret = 1;  
    ret \*= getZoom(el);  
    function getZoom(htmlEl) \{  
        var ret = 1;  
        // 这里的add将el的缩放也计算在内    
        if($(el).css(zoomPer) && $(el).css(zoomPer)!=undefinedPer) \{  
            sys.ver==parseInt(sys.ver);  
            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 ret;  
\}