模拟微博发布

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin:0;padding: 0;}
		.one{width: 400px;background: gray;margin: 10px auto}
		input{width: 300px;height: 30px;margin-top: 10px;}
		textarea{width: 300px;height: 80px;margin-top: 10px;}
		label{vertical-align: top;margin-top: 10px;display: inline-block;}	
		li{list-style: none;}
		button{margin-left: 50px;width: 100px;height: 30px;}
	</style>
	<script src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.min.js"></script>
</head>
<body>
	<div class="one">
		<label>姓名：</label><input type="text"><br />
		<label>内容：</label><textarea></textarea><br />
		<button>发布</button>
		<h1>留言表</h1>
		<ul></ul>
	</div>
	<script type="text/javascript">
		$(function(){
			$("button").on("click",function(){
				//创建元素
				var labelObj = $("<li><p></p><p></p><a href=javascript:void(0)'>删除</a></li>");
				labelObj.find("p").eq(0).text($("input").val());
				labelObj.find("p").eq(1).text($("textarea").val());
				$("input").val("");
				$("textarea").val("");
				$("ul").prepend(labelObj);
				var h=labelObj.height();
				labelObj.height(0);
				labelObj.animate({
					height:h,
				})
				labelObj.find("a").on("click",function(){
					$(this).parent().animate({
						height:0,
					},function(){
						$(this).remove();
					})
				})
			})
			
		})
	</script>
</body>
</html>
posted @ 2017-06-01 18:51 火星黑洞阅读(237) 评论(0) 收藏举报
刷新页面返回顶部