jQuery——表单应用（2）

多行文本框应用之高度变化

HTML：

<!--表单-多行文本框应用-高度变化-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link type="text/css" href="01.css" rel="stylesheet"/>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <div class="he">
            <span class="big">放大</span>
            <span class="small">缩小</span>
        </div>
        <div class="content">
            <textarea class="cc" rows="10" cols="40">
                博客园创立于2004年，是一个面向开发者的知识分享社区。博客园自创立之初就一
                直致力于解决如何帮助开发者用代码改变世界。曾被评为“2007年中国最具投资价值100网站”。
                博客园来到了上海，有了自己的团队，注册用户4万多，每天有15万以上的用户访问，除了博客，
                有了互动交流的小组，有了你问我答的博问，有了收藏精彩内容的网摘，有了搜索站内内容的找找看，
                有了随时记录思想火花的闪存，有了随时了解业内动态的新闻频道，有了知识库，有了期刊，有了……
                博客园的用户中成长出了一批又一批专家，在IT行业中大展身手！
                博客园在行业中的影响力越来越大！
                博客园正朝着高品质的IT媒体与社区方向发展……
            </textarea>
        </div>
        <script type="text/javascript">
            $(".big").click(function(){
                if(! $(".cc").is(":animated")){
                    if($(".cc").height() < 500){
                        //$(".cc").height($(".cc").height() + 50);
                        $(".cc").animate({height: "+=50"}, 400);
                    }
                }    
            })
            $(".small").click(function(){
                if(! $(".cc").is(":animated")){
                    if($(".cc").height() > 50){
                        //$(".cc").height($(".cc").height() - 50);
                        $(".cc").animate({height: "-=50"}, 400);
                    }
                }
            })
        </script>
    </body>
</html>

CSS：

.big, .small{
    border: 1px double red;
    background-color: yellow;
    cursor: pointer;
}

END

posted @ 2017-07-04 18:29  小嘉欣  阅读(153)  评论(0)  编辑  收藏  举报