最近遇到 需要根據(jù) 縮放比例 來 縮放頁面內(nèi)的元素，頁面內(nèi)元素的 相對位置不變幽歼。
于是用到了 zoom 屬性卤档。
zoom 屬性 是可以 對 元素內(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();
});
