大家帮忙做个测试 -》用“Shift+鼠标滚轮”改变文字、图片大小


用Shift+鼠标滚轮操作，不用Ctrl是因为许多浏览器已定义，谢谢啦！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>改变页面字体大小</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(function(){  //Dom加载完成时执行
           var oFontSize=parseInt($('body').css("font-size")); //保存原来的文字大小
           document.onmousewheel=function (){  //注册 onmousewheel 事件
            if(event.shiftKey) //若按下shift键，可改为ctrlKey（确保是程序的功能而不是浏览器本身具有的功能）
            {
                var d=event.wheelDelta/60; //根据鼠标滚动量计算字体改变量
                var ns=Math.ceil(oFontSize+d); //计算新的字体大小
                $('body').css("font-size",ns+'px');   //设置body的字体大小
                $('img').width($('img').width()*ns/oFontSize); //按比例设置图片的大小
                oFontSize=ns;  //保存刚设置的文字大小
            }
           }
        });
    </script>
</head>
<body>
    <p>晚餐之后，女孩说：咱们去一个男人都想去的地方。</p>
    <p>男孩不解问：什么地方？</p>
    <p>女孩说：饿的时候你想干什么？</p>
    <p>男孩：吃饭呗。</p>
    <p>女孩：累了呢？</p>
    <p>男孩：睡觉。</p>
    <p>女孩：睡前干什么？</p>
    <p>男孩：想不出来了？</p>
    <p>女孩：你猜，腰以下，腿之上部位的行为。</p>
    <p>男孩大悟：原来你说的是，上卫生间啊！</p>
    <img src='http://i.dahe.cn/attachment/201108/17/66833_1313547270zC23.jpg' />
</body>
</html>

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
      <title>改变页面字体大小</title>
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script type="text/javascript">
      $(function(){ //Dom加载完成时执行
      var oFontSize=parseInt($('body').css("font-size")); //保存原来的文字大小
      document.onmousewheel=function (){ //注册 onmousewheel 事件
      if(event.shiftKey) //若按下shift键，可改为ctrlKey（确保是程序的功能而不是浏览器本身具有的功能）
      {
      var d=event.wheelDelta/60; //根据鼠标滚动量计算字体改变量
      var ns=Math.ceil(oFontSize+d); //计算新的字体大小
      $('body').css("font-size",ns+'px'); //设置body的字体大小
      $('img').width($('img').width()*ns/oFontSize); //按比例设置图片的大小
      oFontSize=ns; //保存刚设置的文字大小
      }
      }
      });
      </script>
    </head>
    <body>
      <p>晚餐之后，女孩说：咱们去一个男人都想去的地方。</p>
      <p>男孩不解问：什么地方？</p>
      <p>女孩说：饿的时候你想干什么？</p>
      <p>男孩：吃饭呗。</p>
      <p>女孩：累了呢？</p>
      <p>男孩：睡觉。</p>
      <p>女孩：睡前干什么？</p>
      <p>男孩：想不出来了？</p>
      <p>女孩：你猜，腰以下，腿之上部位的行为。</p>
      <p>男孩大悟：原来你说的是，上卫生间啊！</p>
      <img src='http://i.dahe.cn/attachment/201108/17/66833_1313547270zC23.jpg' />
    </body>
    </html>
      

  2.   


    谢谢测试，应该是缩小字体时，有可能造成 ns 的值小于0，bug啊！
      

  3.   


    谢谢 wxr0323 啦，主要是IE6、IE7的测试啊。
      

  4.   

    修改了 anchenyanyue 发现的bug!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>改变页面字体大小</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
            $(function(){  //Dom加载完成时执行
               var oFontSize=parseInt($('body').css("font-size")); //保存原来的文字大小
               document.onmousewheel=function (){  //注册 onmousewheel 事件
                if(event.shiftKey) //若按下shift键，可改为ctrlKey（确保是程序的功能而不是浏览器本身具有的功能）
                {
                    var d=event.wheelDelta/60; //根据鼠标滚动量计算字体改变量
                    var ns=Math.ceil(oFontSize+d); //计算新的字体大小
                    if(ns>=10) //控制最小字体大小
                    {
                        $('body').css("font-size",ns+'px');   //设置body的字体大小
                        $('img').width($('img').width()*ns/oFontSize); //按比例设置图片的大小
                        oFontSize=ns;  //保存刚设置的文字大小
                    }
                }
               }
            });
        </script>
    </head>
    <body>
        <p>晚餐之后，女孩说：咱们去一个男人都想去的地方。</p>
        <p>男孩不解问：什么地方？</p>
        <p>女孩说：饿的时候你想干什么？</p>
        <p>男孩：吃饭呗。</p>
        <p>女孩：累了呢？</p>
        <p>男孩：睡觉。</p>
        <p>女孩：睡前干什么？</p>
        <p>男孩：想不出来了？</p>
        <p>女孩：你猜，腰以下，腿之上部位的行为。</p>
        <p>男孩大悟：原来你说的是，上卫生间啊！</p>
        <img src='http://i.dahe.cn/attachment/201108/17/66833_1313547270zC23.jpg' />
    </body>
    </html>