网页缩放

浏览数：28 / 时间：2015年06月09日

在手机上看网页时，可通过双指拖拉实现缩放，非常的实用。

实际上在电脑上可以很容易地实现缩放功能。

一、实现缩放

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>

完成后的效果如下图：
技术分享