js页面整体放大缩小兼容所有浏览器(ie及firefox等)

作者: MJ 分类: html 发布时间: 2018-11-15 09:37

js页面整体放大缩小兼容所有浏览器(ie及firefox等)优化网络上的办法,唯一不完美的是ie8下缩放原点是从左上角开始的,待解决。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面缩放</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body{
			font-size:14px;
		}
		button{
			width:100px;
			height:35px;
		}
	</style>
</head>
<body>
	<div id="box">
		<button id="pageBig">放大</button>
		<button id="pageSmall">缩小</button>
		<br /><br /><br />
		<p>我即将对著名的“天堂鸟之国”巴布亚新几内亚进行国事访问,并出席在巴新举行的亚太经合组织第二十六次领导人非正式会议。这将是我首次到访巴新,也是中国国家主席首次对巴新进行国事访问。我对此充满期待。</p>
		<p>巴新是面积最大、人口最多的太平洋岛国,自然资源丰富,发展潜力巨大,是一片充满希望的热土。近年来,在奥尼尔总理领导下,巴新政府和人民积极进取、奋发图强,国家发展欣欣向荣,社会面貌焕然一新。我衷心祝愿巴新在国家建设和经济社会发展的道路上不断取得新的更大成就,预祝巴新这次主办亚太经合组织领导人非正式会议获得圆满成功。</p>
		<p>中国同巴新友好交往源远流长。早在100多年前就有华人漂洋过海来到这里,扎根当地、辛勤劳动,为巴新经济社会发展作出了重要贡献。1976年两国建交以来,双方坚持相互尊重、平等相待、互利共赢,中国同巴新关系经受住了国际风云变幻考验,历久弥新。</p>
		<p>近年来,两国关系进入了快速发展的新阶段。巴新是中国在太平洋岛国地区第一大贸易伙伴,中国成为巴新第一大外资来源地和第一大工程承包方。中国援建的独立大道、国际会议中心将为巴新主办这次亚太经合组织领导人非正式会议发挥重要作用;中国医疗队16年如一日为巴新民众提供人道主义医疗服务;使用中国政府优惠贷款建设的水电站、医院、校舍成为巴新各地的新地标;中国公司积极响应巴新政府提出的“2030发展战略”,在巴新全国参与建设公路、桥梁、机场、码头。</p>
		<p>18年前,我担任中国福建省省长期间,曾推动实施福建省援助巴新东高地省菌草、旱稻种植技术示范项目。我高兴地得知,这一项目持续运作至今,发挥了很好的经济社会效益,成为中国同巴新关系发展的一段佳话。</p>
	</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		//初始化默认缩放级别
		var zoomNum = 1;
		var $body = $('#box');
		//页面放大函数
		function PageBig() {
			zoomNum += 0.1;
			//兼容firefox浏览器代码
			//需要transform-origin:center top设置,否则页面顶部看不到了
			$body.css({
				'transform': 'scale(' + zoomNum + ')',
				'-moz-transform': 'scale(' + zoomNum + ')',
				'-ms-filter': 'scale(' + zoomNum + ')',
				'transform-origin': 'center top',
				'-ms-transform-origin': 'center top'
			});
			$body.css('zoom', zoomNum);
		}
		//页面缩小函数
		function PageSmall() {
			zoomNum -= 0.1;
			//兼容firefox浏览器代码
			//需要transform-origin:center top设置,否则页面顶部看不到了
			$body.css({
				'transform': 'scale(' + zoomNum + ')',
				'-moz-transform': 'scale(' + zoomNum + ')',
				'-ms-transform': 'scale(' + zoomNum + ')',
				'transform-origin': 'center top',
				'-ms-transform-origin': 'center top'
			});
			$body.css('zoom', zoomNum);
		}

		$('#pageBig').click(function() {
			PageBig();
		});
		$('#pageSmall').click(function() {
			PageSmall();
		});
	});
</script>
</body>
</html>

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注