前端笔记（一）--》Zoom 属性及解决火狐不支持方法

最近遇到 需要根据 缩放比例 来 缩放页面内的元素，页面内元素的 相对位置不变。

于是用到了 zoom 属性。

zoom 属性 是可以 对 元素内的所有元素 进行缩放。

用法：

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();


});