本文介绍了一种仅适用于Internet Explorer浏览器的网页缩放方法，通过修改HTML文档中body标签的zoom属性来实现页面内容的整体放大或缩小，包括字体和图片等元素。
原理：通过改变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%'; ">
<!-- The zoomable area container -->
<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">
<!-- The zoomable area -->
<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>
<!-- Displayed code -->
<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>
效果预览：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
