jquery放大和缩小网页的字体源代码,最终的效果如图所示

001

图片:原始大小字体

002

图片:放大后的字体大小

提示:点击图片看大图

 

源代码:

几行jquery而已

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.css.network/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
        var zoom1 = function () {
            var font = $("body").css("font-size");
            var f = parseFloat(font, 10);
            f += 2;
            $("body").css("font-size", f);

        }

        var zoom2 = function () {

            var font = $("body").css("font-size");
            var f = parseFloat(font, 10);
            f -= 2;
            $("body").css("font-size", f);

        }
    </script>
</head>
<body>
    <span id="Zoom1" style="cursor: hand; border: 1px solid;" onclick="zoom1();">&nbsp;+&nbsp;
    </span>&nbsp;&nbsp; <span id="Zoom2" style="cursor: hand; border: 1px solid;" onclick="zoom2();">
        &nbsp; -&nbsp; </span>
    <div>
        文章全部内容
    </div>
    内容
</body>
</html>