js页面整体放大缩小兼容所有浏览器(ie及firefox等)优化网络上的办法,唯一不完美的是ie8下缩放原点是从左上角开始的,待解决。

测试地址:http://www.chinasgp.cn/tool/wuzhang.html

$(function() {

//初始化默认缩放级别

var zoomNum = 1;

var $body = $('#box');

//页面放大函数

function PageBig() {

zoomNum += 0.1;

//兼容firefox浏览器代码

//需要transform-origin:center top设置,否则页面顶部看不到了

$body.css({

'transform': 'scale(' + zoomNum + ')',

'-moz-transform': 'scale(' + zoomNum + ')',

'-ms-filter': 'scale(' + zoomNum + ')',

'transform-origin': 'center top',

'-ms-transform-origin': 'center top'

});

$body.css('zoom', zoomNum);

}

//页面缩小函数

function PageSmall() {

zoomNum -= 0.1;

//兼容firefox浏览器代码

//需要transform-origin:center top设置,否则页面顶部看不到了

$body.css({

'transform': 'scale(' + zoomNum + ')',

'-moz-transform': 'scale(' + zoomNum + ')',

'-ms-transform': 'scale(' + zoomNum + ')',

'transform-origin': 'center top',

'-ms-transform-origin': 'center top'

});

$body.css('zoom', zoomNum);

 

}