首页 >> 网站适老化改造 >> ie js 网页放大缩小 无障碍网站适老化改造兼容所有浏览器(ie及firefox等)
ie js 网页放大缩小 无障碍网站适老化改造兼容所有浏览器(ie及firefox等)
js页面整体放大缩小兼容所有浏览器(ie及firefox等)优化网络上的办法,唯一不完美的是ie8下缩放原点是从左上角开始的,待解决。
测试地址:http://www.chinasgp.cn/tool/wuzhang.html
$(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);
}