显示页面等比例缩放
用户投稿 学习笔记 9阅读
最近在工作中遇到一个页面放大问题？放大目标在iframe中，自己的实验贴出来，希望能帮到有这样需求的人。
不多说，直接上图，清楚明白。
（1）正常比例
（2）放大
（3）缩小
一、CSS3参考手册 语法：
zoom：normal | <number> | <percentage>
默认值：normal
适用于：所有元素
继承性：有
动画性：是
计算值：绝对长度
取值： normal： 使用对象的实际尺寸。 <number>： 用浮点数来定义缩放比例。不允许负值 <percentage>： 用百分比来定义缩放比例。不允许负值 说明： 设置或检索对象的缩放比例。 对应的脚本特性为zoom。 兼容性： 浅绿 = 支持红色 = 不支持粉色 = 部分支持 Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome Basic Support 6.0+ 2.0-40.0 4.0+ 6.0+ 15.0+ 6.0+ 2.1+ 18.0+
二、实验代码
（1）zomm.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-2.1.0.js" ></script><script type="text/javascript"></script></head><body><div><input type="button" name="" id="" value="放大" οnclick="parent.frames['contentiframe'].window.ZoomIn()" />--------<input type="button" name="" id="" value="缩小" οnclick="parent.frames['contentiframe'].window.ZoomOut()" />--------<input type="button" name="" id="" value="恢复" οnclick="parent.frames['contentiframe'].window.initZoom()" /></div><hr /><iframe id="contentiframe" name="contentiframe" style="width:50%;height:500px;" src="sample_table.html">/iframe></body></html>
（2）sample_table.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">table.hovertable {width: 800px;font-family: verdana, arial, sans-serif;font-size: 11px;color: #333333;border-width: 1px;border-color: #999999;border-collapse: collapse;}table.hovertable th {background-color: #45aeea;border-width: 1px;padding: 8px;border-style: solid;border-color: #D9D9D9;}table.hovertable tr {background-color: #FFFFFF;}table.hovertable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #D9D9D9;}</style><script type="text/javascript" src="js/jquery-2.1.0.js" ></script><script>var zoomRate = 0.02; //每次放缩比例增量var maxRate = 1.5; //最大放大倍数var minRate = 0.6; //最小缩小倍数var currZoom = 1; //当前缩放比//放大function ZoomIn() {if(currZoom >= maxRate) {return;} else {currZoom += zoomRate;$('body').css('zoom',currZoom);}}//缩小function ZoomOut() {if(currZoom <= minRate) {return;} else {currZoom -= zoomRate;$('body').css('zoom',currZoom);}}//恢复正常显示 100%function initZoom() {currZoom = 1;$('body').css('zoom',currZoom);}</script></head><body><table class="hovertable"><tr><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th><th>Info Header 4</th></tr><tr οnmοuseοver="this.style.backgroundColor='#FFE6B0';" οnmοuseοut="this.style.backgroundColor='#FFFFFF';"><td>Item 1A</td><td>Item 1B</td><td>Item 1C</td><td>Item 1D</td></tr><tr οnmοuseοver="this.style.backgroundColor='#FFE6B0';" οnmοuseοut="this.style.backgroundColor='#FFFFFF';"><td>Item 2A</td><td>Item 2B</td><td>Item 2C</td><td>Item 2D</td></tr><tr οnmοuseοver="this.style.backgroundColor='#FFE6B0';" οnmοuseοut="this.style.backgroundColor='#FFFFFF';"><td>Item 3A</td><td>Item 3B</td><td>Item 3C</td><td>Item 3D</td></tr><tr οnmοuseοver="this.style.backgroundColor='#FFE6B0';" οnmοuseοut="this.style.backgroundColor='#FFFFFF';"><td>Item 4A</td><td>Item 4B</td><td>Item 4C</td><td>Item 4D</td></tr><tr οnmοuseοver="this.style.backgroundColor='#FFE6B0';" οnmοuseοut="this.style.backgroundColor='#FFFFFF';"><td>Item 5A</td><td>Item 5B</td><td>Item 5C</td><td>Item 5D</td></tr></table></body></html>