绑定button的onclick事件zoomOut,zoomIn。依赖于jquery。使用transform缩放 domObj
//缩小
zoomOut=function(){
var zoom=getZoomLeve($('#domObj'));
var thisWidth=$('#domObj').width();
var thisHeight=$('#domObj').height();
if(zoom>0.5){
zoom-=0.2;
}
$('#domObj').css('transform','translate('+(zoom-1)*thisWidth/2+'px, '+(zoom-1)*thisHeight/2+'px) scale('+zoom+')');
}
//放大
zoomIn=function(){
var zoom=getZoomLeve($('#domObj'));
var thisWidth=$('#domObj').width();
var thisHeight=$('#domObj').height();
if(zoom<2){
zoom+=0.2;
}
$('#domObj').css('transform','translate('+(zoom-1)*thisWidth/2+'px, '+(zoom-1)*thisHeight/2+'px) scale('+zoom+')');
}
//获取元素的放大/缩小倍数,区分浏览器
getZoomLeve = function(el) {
var sys=getBrowserInfo();
function getBrowserInfo(){
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var re =/(msie|firefox|chrome|opera|version).*?([\d.]+)/;
var m = ua.match(re);
Sys.browser = m[1].replace(/version/, "'safari");
Sys.ver = m[2];
return Sys;
}
//sys.browser得到浏览器的类型 sys.ver得到浏览器的版本
// 标示缩放的css属性
var zoomPer, undefinedPer = 'none';
if(sys.browser.indexOf('firefox')!=-1) {
zoomPer = '-moz-transform';
}
else if(sys.browser.indexOf('ie')!=-1) {
if(sys.ver == '9') {
zoomPer = '-ms-transform';
} else {
zoomPer = 'zoom';
undefinedPer = 'normal';
}
}
else {
zoomPer = '-webkit-transform';
}
var ret = 1;
ret *= getZoom(el);
function getZoom(htmlEl) {
var ret = 1;
// 这里的add将el的缩放也计算在内
if($(el).css(zoomPer) && $(el).css(zoomPer)!=undefinedPer) {
sys.ver==parseInt(sys.ver);
if(sys.browser.indexOf('ie')!=-1 && sys.ver < 9) {
ret *= el.style.zoom;
} else {
var temp = $(el).css(zoomPer),
start = temp.indexOf('(') + 1,
end = temp.indexOf(',');
ret *= temp.substring(start, end);
}
}
return ret;
}
return ret;
}