最近遇到 需要根據(jù) 縮放比例 來(lái) 縮放頁(yè)面內(nèi)的元素，頁(yè)面內(nèi)元素的 相對(duì)位置不變。

于是用到了 zoom 屬性。

zoom 屬性 是可以 對(duì) 元素內(nèi)的所有元素 進(jìn)行縮放。

用法：

function changeZoom() {

    var width = $(window).width();

    var height = $(window).height();

    var w = $("#container").width();

    var h = $("#container").height();

    var zoom = Math.min(width / w, height / h);

    //console.log(zoom);

    var left = (width - w * zoom) / 2;

    var top = (height - h * zoom) / 2;

    //console.log("left:" + left + ";right:" + top);



    //$("#container").css("left", pixels(left)).css("top", 
pixels(top)).css("transform", zoom);

    $("#container").css("left", pixels(left)).css("top", pixels(top)).css("zoom", 
zoom);

    //$("#container").css("zoom", zoom);

};
function pixels(n) {

    return String(n) + "px";

};

window.onresize = function() {



    changeZoom();


};

$(document).ready(function () {

    changeZoom();


});

但是 火狐不支持zoom ，但支持
-moz-transform:scale(zoom)
transform-origin:left top

那么只需要 將代碼更改為：

function changeZoom() {

    var width = $(window).width();

    var height = $(window).height();

    var w = $("#container").width();

    var h = $("#container").height();

    var zoom = Math.min(width / w, height / h);

    //console.log(zoom);

    var left = (width - w * zoom) / 2;

    var top = (height - h * zoom) / 2;

    //console.log("left:" + left + ";right:" + top);



    //$("#container").css("left", pixels(left)).css("top", 
pixels(top)).css("transform", zoom);

    $("#container").css("left", pixels(left)).css("top", pixels(top)).css("zoom", 
zoom).css('-moz-transform', "scale(" + zoom + ")").css("transform-origin", "left 
top");

    //$("#container").css("zoom", zoom);

};
function pixels(n) {

    return String(n) + "px";

};

window.onresize = function() {



    changeZoom();


};

$(document).ready(function () {

    changeZoom();


});