jQuery Mobile或javascript中的放大和缩小功能 [英] Zoom in and zoom out functionality in jquery mobile or javascript

问题描述

是否有使用jQuery mobile放大和缩小页面功能的好方法.我瞥了一眼，发现了

Is there any good way for zoom in and zoom out functionality in a page using jQuery mobile. I goggled it and found

window.parent.document.body.style.zoom = 1.5;

在jQuery mobile中还有更好的方法来放大和缩小功能吗?

Is there any better way to do zoom in and zoom out functionality in jQuery mobile?

推荐答案

以下是一个示例解决方法，DEMO http: //jsfiddle.net/yeyene/aGuLE/

Here is a sample workaround, DEMO http://jsfiddle.net/yeyene/aGuLE/

$(document).ready(function () {
    $('#zoomIn').on('click', function () {
        zoomIn(1.2);
    });
    $('#zoomOut').on('click', function () {
        zoomOut();
    });
});

function zoomIn(zoomLev) {
    if (zoomLev > 1) {
        if (typeof (document.body.style.zoom) != "undefined") {
            $(document.body).css('zoom', zoomLev);
        }else {
            // Mozilla doesn't support zoom, use -moz-transform to scale and compensate for lost width
            $('#divWrap').css({
                "-moz-transform": 'scale(" + zoomLev + ")',
                width: $(window).width() / zoomLev
            });
        }
    }
}

function zoomOut() {
    $(document.body).css({
        zoom : '',
        position : '',
        left: "",
        top: "",
        "-moz-transform" : "",
        width : ''  
    });
}

这篇关于jQuery Mobile或javascript中的放大和缩小功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！