首页 > 代码库 > 怎样在留言板中实现动画效果
怎样在留言板中实现动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业一</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
margin: 20px auto;
}
#box {
width: 500px;
text-align: center;
background: darkgray;
padding-top: 1px;
}
#input1 {
width: 355px;
height: 20px;
}
#text1 {
width: 355px;
height: 300px;
}
#center>span {
position: relative;
bottom: 150px;
}
#btn {
width: 200px;
}
#last {
font-size: 30px;
}
</style>
</head>
<body>
<div id="box">
<div id="name">
<sapn>用户名:</sapn>
<input type="text" id="input1" />
</div>
<div id="center">
<span>内 容:</span>
<textarea name="" rows="" cols="" id="text1"></textarea>
</div>
<div>
<input type="button" id="btn" value="提交" />
</div>
<div id="last">
留言板
</div>
</div>
</body>
<script src="../../Day19/JS/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#btn").click(function() {
var div1 = "<div></div>";
var p1 = "<p>" + $("#input1")[0].value + "</p>";
var p2 = "<p>" + $("#text1")[0].value + "</p>";
var btn1 = "<input type=button value=http://www.mamicode.com/删除 class="btn1">";
$("#box").append(div1);
$("#box>div:last").append(p1);
$("#box>div:last").append(p2);
$("#box>div:last").append(btn1);
$("#box>div:last").css({
width: "350px",
overflow: "hidden",
textAlign: "left",
display: "none",
})
$("p").css({
width: "300px",
background: "yellow",
marginBottom: "10px",
textAlign: "left",
display: "inline-block",
})
$("#box>div:last").slideDown(1000);
text1.value = "";
input1.value = "";
$(".btn1").click(function() {
$(this).parent().slideUp(1000);
})
})
</script>
</html>
怎样在留言板中实现动画效果