在手机上看网页时,可通过双指拖拉实现缩放,非常的实用。
实际上在电脑上可以很容易地实现缩放功能。
一、实现缩放
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>
完成后的效果如下图: