jQuery简单实现div层的放大与缩小

最新推荐文章于 2020-12-23 23:33:21 发布

weixin_30906701

最新推荐文章于 2020-12-23 23:33:21 发布

阅读量170

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/gdjlc/archive/2010/07/08/2086893.html

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .content
        {
            border: 1px solid #ccc;
            width: 440px;
            overflow: hidden;
            margin: 10px;
        }
    </style>

    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            if ($('#content').height() > 400)
                $('#content').height(400);
            $('#bigger').toggle(function() {
                $('#content').height($('#content').height() + 100);
                $('#bigger').html('缩小');
            }, function() {
                $('#content').height($('#content').height() - 100);
                $('#bigger').html('放大');
            })
        });
    </script>

</head>
<body>
    <div id="content" class="content">
        內容1<br />
        內容2<br />
        內容3<br />
        內容4<br />
        內容5<br />
        內容6<br />
        內容7<br />
        內容8<br />
        內容9<br />
        內容10<br />
        內容11<br />
        內容12<br />
        內容13<br />
        內容14<br />
        內容15<br />
        內容16<br />
        內容17<br />
        內容18<br />
        內容19<br />
        內容20<br />
        內容21<br />
        內容22<br />
        內容23<br />
        內容24<br />
        內容25<br />
    </div>
    <br />
    <span id="bigger">放大</span>
</body>
</html>