【第六章】文本域的高度变化

最新推荐文章于 2021-06-23 16:46:05 发布

JavaScript豆豆

最新推荐文章于 2021-06-23 16:46:05 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/qq_45695622/article/details/103170171

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script language="JavaScript" src="js/jquery-1.11.1.min.js"></script>
		<title>文本域的高度变化</title>
	</head>
	<body>
		<div class="message">
			<div class="msg_top">
				<input type="button"value="放大"id="bigBtn"/>&nbsp;&nbsp;<input type="button"value="缩小"id="smallBtn"/>
			</div>
			<div class="tt">
				<textarea id="content"rows="4"cols="35">
					愿你三冬暖，愿你春不寒;
					愿你天黑有灯，下雨有伞。
					愿你路上有良人相伴，
					愿你所有快乐 无需假装，
					愿你此生尽兴、赤诚善良。
					愿时光能缓，愿故人不散;
					愿有人陪你颠沛流离，
					愿你惦念的人能和你道早安，
					愿你独闯的日子里不觉得孤单。
					愿你人间走一遭，圆满了三界六道，
					看透了是非善恶;
					从此福来心至，皆是逍遥。
					
					愿你一辈子下来心上没有补丁，
					
					愿你的每次流泪都是喜极而泣，
					
					愿你精疲力尽时有树可倚。
					
					愿你学会释怀后一身轻，
					
					愿你走出半生，归来仍是少年。
					
					愿你慢慢长大。
					
					愿你有好运气，如果没有，愿你在不幸中学会慈悲。
					
					愿你被很多人爱，如果没有，愿你在寂寞中学会宽容。
					
					愿你一生一世每天都可以睡到自然醒。
				</textarea>
			</div>
		</div>
		<script>
			$(document).ready(function(){
				var $content=$("#content");                    //获取文本域对象
				$("#bigBtn").click(function(){                 //放大按钮单击事件
					if(!$content.is(":animated")){             //是否处于动画中
						if(!$content.height()<350){
							$content.animate({height:"+=70"},500);
						}
					}
				})
				$("#smallBtn").click(function(){               //缩小按钮单击事件
					if(!$content.is(":animated")){             //是否处于动画中
						if($content.height()>70){
							$content.animate({height:"-=70"},500);
						}
					}
				})
			})
		</script>
	</body>
<html>

JavaScript豆豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【第六章】文本域的高度变化

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script language="JavaScript" src="js/jquery-1.11.1.min.js"></script> <title>文本域的高度变化</title&gt...
复制链接

扫一扫