动态对页面进行放大和缩小

发布时间:2020-07-11 00:56:37
点击:0次

动态对页面进行放大和缩小

 $(function() {
    //初始化默认缩放级别
    var zoomNum = 1;
    var $body = $('body');
    //页面放大函数
    function PageBig() {
     zoomNum += 0.1;
     //兼容firefox浏览器代码
     //需要transform-origin:center top设置,否则页面顶部看不到了
     $body.css({
      '-moz-transform': 'scale(' + zoomNum + ')',
      'transform-origin': 'center top'
     });
     $body.css('zoom', zoomNum)
    }
    //页面缩小函数
    function PageSmall() {
     zoomNum -= 0.1;
     //兼容firefox浏览器代码
     //需要transform-origin:center top设置,否则页面顶部看不到了
     $body.css({
      '-moz-transform': 'scale(' + zoomNum + ')',
      'transform-origin': 'center top'
     });
     $body.css('zoom', zoomNum);
    }
    $('#pageBig').click(function() {
     PageBig();
    });
    $('#pageSmall').click(function() {
     PageSmall();
    });
   })