Translate

2013년 6월 24일 월요일

[CSS] Browser Zoom In / Out (브라우저 줌/아웃)



<script>
var scale = 1;

function scaleIn() {
scale *= 1.25;
zoom(scale);
}

function scaleOut() {
scale /= 1.25;
zoom(scale);
}

function zoom(scale) {
var body = document.body;
body.style.zoom = scale;  // IE
body.style.webkitTransform = 'scale('+scale+')';  // Webkit(chrome)
body.style.webkitTransformOrigin = '0 0';
body.style.mozTransform = 'scale('+scale+')';  // Mozilla(firefox)
body.style.mozTransformOrigin = '0 0';
body.style.oTransform = 'scale('+scale+')';  // Opera
body.style.oTransformOrigin = '0 0';
}
</script>


<div onclick="scaleIn();">
Zoom In(*1.25)</div>
/
<div onclick="scaleOut();">
Zoom Out(/1.25)</div>





Example (click!!)

Zoom In(*1.25)
/
Zoom Out(/1.25)



참고: http://angeleyes.tistory.com/259

댓글 없음 :

댓글 쓰기