zoukankan      html  css  js  c++  java
  • jQuery简单实现div层的放大与缩小

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .content
            {
                border: 1px solid #ccc;
                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>

  • 相关阅读:
    JavaScript 操作 DOM 元素
    字节数
    如何判断校准曲线是否合格
    [WPF]MVVM模式下如何在后台cs中调用绑定命令
    逆对数antilog0.03376如何计算
    未能解析此远程名称:'nuget.org' 的解决方法
    【WPF】WPF ScorllView触摸滚动实现
    【VS2017】清除NuGet下载旧版本缓存
    【UWP】截图
    test
  • 原文地址:https://www.cnblogs.com/gdjlc/p/2086893.html
Copyright © 2011-2022 走看看