Zoom 이라는 속성이 있습니다.
값은 normal, number(scale), percentage를 받으며 적용은 아래와 같습니다.
body {
/* default : normal, 1.0, 100% */
zoom:1.25; /* number(scale) */
/*zoom:125%; percentage */
}
script의 경우는 아래와 같습니다.
$(document).ready(function() {
//document.body.style.zoom = 1.00;
//document.body.style.zoom = "100%";
document.body.style.zoom = "normal";
});
적용은 간단합니다..
이것은 IE 전용입니다. (하지만 Chrome, Safari4+ 에서도 됩니다.)
MSDN 참고하려면 여기를 클릭하세요.
CSS3의 Transform을 이용하여, Firefox, Opera도 지원 가능합니다.
코드는 아래와 같습니다.
body {
-webkit-transform:scale(1.50);
-webkit-transform-origin:0 0;
-moz-transform:scale(1.50);
-moz-transform-origin:0 0;
-o-transform:scale(1.50);
-o-transform-origin:0 0;
}
$('body').css('-webkit-transform','scale(' + (size) + ')');
$('body').css('-webkit-transform-origin','0 0');
$('body').css('-moz-transform','scale(' + (size) + ')');
$('body').css('-moz-transform-origin','0 0');
$('body').css('-o-transform','scale(' + (size) + ')');
$('body').css('-o-transform-origin','0 0');
아래는 적용 화면 입니다.
코드에서 -webkit-, -moz-, -o-에 대한 설명입니다.
- webkit : 크롬, 사파리(web kit 기반)
- moz : 파이어폭스
- o : 오페라
에 해당하는 핵이라고 보시면 될 듯 합니다.
지원 버전은 FF 3.5+, Safari 4+, Opera 10.0+ 입니다.
transform 의 속성은 더 많은 값들을 가지고 있습니다.
아래 참고 사이트에서 확인하시기 바랍니다.
참고 사이트
http://www.w3.org/TR/css3-2d-transforms/
https://developer.mozilla.org/en/CSS/-moz-transform
http://css3.bradshawenterprises.com/#how2transitions
소스 파일 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="angeleyes">
<meta name="keywords" content="angeleyes,testhtml,testjavascript">
<meta name="description" content="test document">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
-webkit-transform:scale(1.50);
-webkit-transform-origin:0 0;
-moz-transform:scale(1.50);
-moz-transform-origin:0 0;
-o-transform:scale(1.50);
-o-transform-origin:0 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
//<![cdata[
$(document).ready(function() {
//document.body.style.zoom = 1.00;
//document.body.style.zoom = "100%";
//document.body.style.zoom = "normal";
});
function test(){
try {
var _body = document.body;
var size = $("#txtZoom").val();
if (jQuery.browser.msie) {
_body.style.zoom = size;
}
else {
$('body').css('-webkit-transform','scale(' + (size) + ')');
$('body').css('-webkit-transform-origin','0 0');
$('body').css('-moz-transform','scale(' + (size) + ')');
$('body').css('-moz-transform-origin','0 0');
$('body').css('-o-transform','scale(' + (size) + ')');
$('body').css('-o-transform-origin','0 0');
}
}
catch(e) {
alert("test ==> " + e.message);
}
}
function fnClick(){
try {
var size = $("#txtZoom").val();
if(size > 2.00) $("#txtZoom").val("0.75");
else $("#txtZoom").val(Number(size) + 0.25);
test();
}
catch(e) {
alert("test ==> " + e.message);
}
}
//]]>
</script>
</head>
<body>
<input type="text" id="txtZoom" value="2.25" /> <input type="button" id="btnZoom" onclick="fnClick();" value="Click" />
<br /><br />
<table border="1" style="width:450px;">
<colgroup>
<col style="width:50%;" />
<col style="width:50%;" />
</colgroup>
<tbody>
<tr>
<td>#1</td>
<td>#2</td>
</tr>
<tr>
<td>#3</td>
<td><img src="http://static.naver.com/www/u/2010/0611/nmms_215646753.gif" alt="naver Logo" /></td>
</tr>
</tbody>
</table>
</body>
</html>
감사합니다.
ZoomTestFile.html
