点击扩展或缩小文本框效果代码

时间：2015-12-31 10:21:55 阅读：113 评论：0 收藏：0 [点我收藏+]

标签：

点击扩展或缩小文本框效果代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>点击扩展或缩小文本框效果代码-蚂蚁部落</title>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
   var $comment = $(‘#comment‘);
   $(‘.bigger‘).click(function(){
     if(!$comment.is(":animated")){
       if( $comment.height() < 500 ){
          $comment.animate({ height : "+=50" },400);
       }
     }
   })
   $(‘.smaller‘).click(function(){
     if(!$comment.is(":animated")){
       if( $comment.height() > 50 ){
          $comment.animate({ height : "-=50" },400);
       }
     }
   });
});
</script>
</style>
</head>
<body>
<textarea rows="10" cols="40" id="comment">请输入内容..</textarea>
<button class="bigger">点击放大</button><button class="smaller">点击缩小</button>
</body>

</html>

一.实现原理:
当点击按钮的时候通过animate()函数以动画的形式调整调整文本框的尺寸。尺寸不是随意调整的，而是设置了一个上线和下线，当超过上限，尺寸就不会再增加，当小于下限，尺寸也不会再减少。
二.代码注释:
1.$(function(){}，当文档结构加载完成之后再去执行函数中的代码。
2.var $comment = $(‘#comment‘),获取文本框对象。
3.$(‘.bigger‘).click(function(){}，为class属性值为bigger的按钮绑定click事件处理函数。
4.if(!$comment.is(":animated")){}判断文本框是否处于动画状态。关于is()可以参阅 jQuery的is()方法。
5.if( $comment.height() < 500 ）{}，判断文本框高度是否小于500px，如果小于则会扩大尺寸。
6.$comment.animate({ height : "+=50" },400)，重新设置高度，在原有的基础上加50。

点击扩展或缩小文本框效果代码

标签：

原文地址：http://www.cnblogs.com/mmx-jiayou/p/5090711.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行