javascript控制网页缩放(仅对IE有效)

hemingwang0902

5822人浏览 · 2009-07-27 11:30:00

hemingwang0902 · 2009-07-27 11:30:00 发布

原理：通过改变HTML文档中的 body 标签的 zoom 样式值对网页进行缩放

特别说明： style.zoom 是IE特有的样式属性，所以此处的网页缩放代码仅对IE有效（字体和图片均会按比例进行缩放）

下面是示例代码：
<HTML> <HEAD> <TITLE>Zoom Demo</TITLE> <SCRIPT> function zoomIn() { newZoom= parseInt(oZoom.style.zoom)+10+'%' oZoom.style.zoom =newZoom; oCode.innerText='zoom: '+newZoom+''; } function zoomOut() { newZoom= parseInt(oZoom.style.zoom)-10+'%' oZoom.style.zoom =newZoom; oCode.innerText='zoom: '+newZoom+''; } function changeZoom() { newZoom= parseInt(oSlider.value) oZoom.style.zoom=newZoom+'%'; oCode.innerText='zoom: '+newZoom+'%'; } function changeZoom2(oSel) { var index = oSel.selectedIndex; if(index > 0){ newZoom= oSel.options[index].innerText oZoom.style.zoom=newZoom; oCode.innerText='zoom: '+newZoom+''; } } </SCRIPT> </HEAD> <BODY onload="oZoom.style.zoom='100%';oCode.innerText='zoom: 100%'; ">  <DIV STYLE="width:800px;height:600px; background-color:black; vertical-align: middle;padding:25px; font-family:arial; font-weight:bold; color:white;z-index:3" ALIGN="center">  <DIV ID="oZoom" STYLE="zoom:100%" ALIGN="center"> <H1>Welcome to Seattle!</H1> <IMG SRC="http://images13.51.com/7/b/b4/b5/hemingwang0902/a4b004afbd59f72bbcea6312cd96373e.jpg" /> <BR /> A great city in the beautiful state of Washington. </DIV> </DIV>  <DIV STYLE="border:1px solid black; width:800px; height:90px; padding:1px;padding-left:10px; background-color:white; z-index:3;"> <SPAN><DIV style="</SPAN> <SPAN STYLE="font-weight:bold; font-family:verdana; color:red;font-size:9pt" CLASS="coder" ID="oCode"></SPAN> <SPAN>"></SPAN> <DIV><H1> Welcome to seattle!</H1></DIV> <DIV><IMG SRC="http://images13.51.com/7/b/b4/b5/hemingwang0902/a4b004afbd59f72bbcea6312cd96373e.jpg" /></DIV> <DIV><br />A great city in the beautiful state of Washington.</DIV> <DIV CLASS="coder"></DIV></DIV> </DIV> </DIV> <DIV ID="oControls" STYLE=" width:800px; height:100px; background-color:gray; color:white; font-family:verdana; font-size:11; font-weight:normal;padding:10px; z-index:3; text-align:center; border:1px solid black;text-align:left;" > <DIV STYLE="padding-left:65px" > The code used to generate the image is shown in the area above. <BR /><BR /> Modify the image using the selections below or the <BR /> slider control above and to the left of this window. </DIV> <HR /> <DIV ALIGN=CENTER> <SELECT ID="percent" onchange="changeZoom2(percent); "> <OPTION SELECTED>Use Percentage Value</OPTION> <OPTION>10%</OPTION> <OPTION>25%</OPTION> <OPTION>50%</OPTION> <OPTION>75%</OPTION> <OPTION>100%</OPTION> <OPTION>150%</OPTION> <OPTION>200%</OPTION> </SELECT> <SELECT ID="normal" onchange="changeZoom2(normal); "> <OPTION SELECTED>Use Number Value</OPTION> <OPTION>0.1</OPTION> <OPTION>0.25</OPTION> <OPTION>0.5</OPTION> <OPTION>0.75</OPTION> <OPTION>1.0</OPTION> <OPTION>1.5</OPTION> <OPTION>2.0</OPTION> </SELECT> <HR /> </DIV> </DIV> </BODY> </HTML>

效果预览：
zoom