放大缩小

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>test</title>
<!--<link type="text/css" rel="stylesheet" href="css/head.css" />-->
<style type="text/css">
    #msg {
        width:500px;
        border:1px solid #ccc;
        padding:0px;
        margin:50px auto;
    }
    #msg_cpt {
        border-bottom:1px solid #ccc;
    }
    #content p {
        margin:0px;
          
    }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
</head>
<body>
    <div id="msg">
        <div id="msg_cpt">
            <button class="bigger">放大</button>
            <button class="smaller">缩小</button>
        </div>
        <div id="content">
            <p>
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            this is a some text.
            </p>
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            $('button').click(function(){
                var size = $('#content').css('font-size');
                var fontsize = parseFloat(size,10);
                var unit = size.slice(-2);
                var cname = $(this).attr('class');
                if(cname == "bigger"){
                    fontsize += 2;
                }else if(cname == "smaller"){
                    fontsize -= 2;
                }
                $('#content').css('font-size',fontsize+unit);
                  
            });
        })
    </script>
</body>
</html>


你可能感兴趣的:(Web,放大缩小)