網頁縮放，網頁縮放快速鍵
在手機上看網頁時，可通過雙指拖拉實現縮放，非常的實用。
實際上在電腦上可以很容易地實現縮放功能。
一、實現縮放
1、在IE、Chrome瀏覽器中，只需要在body元素的style中設定縮放屬性就可以了：
style="zoom:1.5;"其中zoom後的參數為放大倍數。
2、在Firefox瀏覽器中，寫法略有不同
-moz-transform:scale(1.5);-moz-transform-origin:top left;scale中的參數為放大倍數。
也可以統一寫成：
<body style="zoom:1.5;-moz-transform:scale(1.5);-moz-transform-origin:top left;">二、實用JavaScript 滑動條 控制項實現縮放控制
利用jQuery easyUI 的slider來控制縮放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>頁面縮放</title><link rel="stylesheet" type="text/css" href="themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="themes/icon.css"><link rel="stylesheet" type="text/css" href="demo.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.easyui.min.js"></script></head><body><h2>頁面縮放</h2><p>Drag the slider to change value.</p><input class="easyui-slider" style="width:300px;zoom:1;" data-options="showTip:true,rule: [1,10],tipFormatter: function(value){return (value /100 * 10 ).toFixed(1) ;},onChange: function(value){$('#div1').css('zoom', 1 + value /100 * 10 );}"><div id="div1" style="margin:20px 20px 50px 20px;"><div>頁面內容sssss</div><img src="https://www.baidu.com/img/bdlogo.png" width="135" height="65"></div></body></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
