首页 > 代码库 > 怎样在留言板中实现动画效果

怎样在留言板中实现动画效果

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; min-height: 25.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #d74200 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #289c97 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #4a8a01 } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #060606 } p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #929151; min-height: 25.0px } p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #929151 } p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #4f5d66 } p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #ad42ef } span.s1 { color: #4f5d66 } span.s2 { color: #2b7ec3 } span.s3 { color: #48565d } span.s4 { color: #289c97 } span.s5 { color: #d74200 } span.s6 { color: #060606 } span.s7 { color: #929151 } span.s8 { color: #ad42ef } span.s9 { color: #4a8a01 } span.s10 { color: #698906 } span.s11 { color: #d16400 } span.s12 { color: #000000 } span.s13 { color: #4663cc } span.Apple-tab-span { white-space: pre }</style>

<!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>内&nbsp;&nbsp;&nbsp;容:</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>

怎样在留言板中实现动画效果