<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css3实现浏览器缩放</title>
<script>
var size = 1.0;
function zoomout(){
size = size +0.1;
set();
}
function zoomin(){
size = size -0.1;
set();
}
function set(){
document.body.style.cssText = document.body.style.cssText + '; -webkit-transform: scale(' + size + ');-webkit-transform-origin: 0 0;';
}
</script>
</head>
<style>
body{ overflow:hidden;}
.wrap{-webkit-transform:scale(1.5);-webkit-transform-origin: 0 0;}
</style>
<body>
<div class="wrap">
<div>缩放</div>
<input type="button" onClick="zoomout()" value="放大">
<input type="button" onClick="zoomin()" value="缩小">
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>css3实现浏览器缩放</title>
<script>
var size = 1.0;
function zoomout(){
size = size +0.1;
set();
}
function zoomin(){
size = size -0.1;
set();
}
function set(){
document.body.style.cssText = document.body.style.cssText + '; -webkit-transform: scale(' + size + ');-webkit-transform-origin: 0 0;';
}
</script>
</head>
<style>
body{ overflow:hidden;}
.wrap{-webkit-transform:scale(1.5);-webkit-transform-origin: 0 0;}
</style>
<body>
<div class="wrap">
<div>缩放</div>
<input type="button" onClick="zoomout()" value="放大">
<input type="button" onClick="zoomin()" value="缩小">
</div>
</body>
</html>