首頁 > 開發者 > JavaScript
原理：通過改變HTML文檔中的 body 標籤的 zoom 樣式值對網頁進行縮放
特別說明： style.zoom 是IE特有的樣式屬性，所以此處的網頁縮放代碼僅對IE有效（字型和圖片均會按比例進行縮放）
下面是範例程式碼：
<HTML><br /><HEAD><br /><TITLE>Zoom Demo</TITLE><br /><SCRIPT><br />function zoomIn() {<br />newZoom= parseInt(oZoom.style.zoom)+10+'%'<br />oZoom.style.zoom =newZoom;<br />oCode.innerText='zoom: '+newZoom+'';<br />}<br />function zoomOut() {<br />newZoom= parseInt(oZoom.style.zoom)-10+'%'<br />oZoom.style.zoom =newZoom;<br />oCode.innerText='zoom: '+newZoom+'';<br />}<br />function changeZoom() {<br />newZoom= parseInt(oSlider.value)<br />oZoom.style.zoom=newZoom+'%';<br />oCode.innerText='zoom: '+newZoom+'%';<br />}<br />function changeZoom2(oSel) {<br />var index = oSel.selectedIndex;<br />if(index > 0){<br />newZoom= oSel.options[index].innerText<br />oZoom.style.zoom=newZoom;<br />oCode.innerText='zoom: '+newZoom+'';<br />}<br />}<br /></SCRIPT><br /></HEAD><br /><BODY onload="oZoom.style.zoom='100%';oCode.innerText='zoom: 100%'; "><br /><!-- The zoomable area container --><br /><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"><br /><!-- The zoomable area --><br /><DIV ID="oZoom" STYLE="zoom:100%" ALIGN="center"><br /><H1>Welcome to Seattle!</H1><br /><IMG SRC="http://images13.51.com/7/b/b4/b5/hemingwang0902/a4b004afbd59f72bbcea6312cd96373e.jpg" /><br /><BR /><br />A great city in the beautiful state of Washington.<br /></DIV><br /></DIV><br /><!-- Displayed code --><br /><DIV STYLE="border:1px solid black; width:800px; height:90px; padding:1px;padding-left:10px; background-color:white; z-index:3;"><br /><SPAN><DIV style="</SPAN><br /><SPAN STYLE="font-weight:bold; font-family:verdana; color:red;font-size:9pt" CLASS="coder" ID="oCode"></SPAN><br /><SPAN>"></SPAN><br /><DIV><H1> Welcome to seattle!</H1></DIV><br /><DIV><IMG SRC="http://images13.51.com/7/b/b4/b5/hemingwang0902/a4b004afbd59f72bbcea6312cd96373e.jpg" /></DIV><br /><DIV><br />A great city in the beautiful state of Washington.</DIV><br /><DIV CLASS="coder"></DIV></DIV><br /></DIV><br /></DIV><br /><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;" ><br /><DIV STYLE="padding-left:65px" ><br />The code used to generate the image is shown in the area above.<br /><BR /><BR /><br />Modify the image using the selections below or the<br /><BR /><br />slider control above and to the left of this window.<br /></DIV><br /><HR /><br /><DIV ALIGN=CENTER><br /><SELECT ID="percent" onchange="changeZoom2(percent); "><br /><OPTION SELECTED>Use Percentage Value</OPTION><br /><OPTION>10%</OPTION><br /><OPTION>25%</OPTION><br /><OPTION>50%</OPTION><br /><OPTION>75%</OPTION><br /><OPTION>100%</OPTION><br /><OPTION>150%</OPTION><br /><OPTION>200%</OPTION><br /></SELECT><br /><SELECT ID="normal" onchange="changeZoom2(normal); "><br /><OPTION SELECTED>Use Number Value</OPTION><br /><OPTION>0.1</OPTION><br /><OPTION>0.25</OPTION><br /><OPTION>0.5</OPTION><br /><OPTION>0.75</OPTION><br /><OPTION>1.0</OPTION><br /><OPTION>1.5</OPTION><br /><OPTION>2.0</OPTION><br /></SELECT><br /><HR /><br /></DIV><br /></DIV><br /></BODY><br /></HTML>
效果預覽：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
