0

我可以缩放我的浏览器在http://jsfiddle.net/gHdPT/4/ 我会用输入放大和缩小替换 A +

window.ZoomScreen = function (amount) {
    document.body.style.webkitTransform =
    document.body.style.msTransform =
    document.body.style.transform = 'scale(' + amount + ')';
    document.body.style.width = 100 / amount + '%';
}

<body>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.</p>
        <a href="#" onclick="ZoomScreen(1)">A+</a>
        <a href="#" onclick="ZoomScreen(1.5)">A+</a>
        <a href="#" onclick="ZoomScreen(2)">A+</a>
        <a href="#" onclick="ZoomScreen(2.5)">A+</a>
    </div>
</body>

如何？谢谢你

4

1 回答 1

0

也许我没有清楚地理解你。

这是你需要的吗？
链接：http: //jsfiddle.net/coshmos/VGMP2/

html: 

<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.</p>
<a href="#" onclick="ZoomIn()">A+</a>
<a href="#" onclick="ZoomOut()">A-</a>
</div>
</body>

JS： 

var zoomLevel = 1;

window.ZoomIn = function () {
    zoomLevel += 0.5;
    document.body.style.webkitTransform =
        document.body.style.msTransform =
        document.body.style.transform = 'scale(' + zoomLevel + ')';
    document.body.style.width = 100 / zoomLevel + '%';
}

window.ZoomOut = function () {
    zoomLevel -= 0.5;
    document.body.style.webkitTransform =
        document.body.style.msTransform =
        document.body.style.transform = 'scale(' + zoomLevel + ')';
    document.body.style.width = 100 / zoomLevel + '%';
}

CSS： 

body {margin: 0 auto;-webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0;}
.container{background: #000;}
p{color:#fff;}
a { color: #FFCC00;}
于 2013-09-18T12:37:29.217 回答