JavaScript初学——jQuery中实现动画的功能(以报表类型演示)
在今天,完成了jQuery的动画的实现,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百分百图</title>
<!-- css样式 -->
<style type="text/css">
body{
background-color: blanchedalmond;
}
div#father {
background-color: gray;
margin: 0 auto;/*居中*/
width: 1100px;
color: white;
/* height: 500px; */
}
div#bor {
text-align: center;
font-family: "黑体";
font-size: large;
height: 30px;
}
div#bor:hover {
background-color: brown;
}
div#son {
text-align: center;
height: 300px;
display: none;
}
div#son div {
width: 100px;
float: left;
}
div#one {
background-color: gray;
height: 1px;
}
div#two,div#three,div#four,div#five,div#six {
background-color: brown;
}
</style>
<!-- js样式 -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 列表的收起/放出
$(document).ready(function(){
$("div#bor").click(function(){
$("div#son").slideToggle();
});
});
</script>
</head>
<body>
<div id="father">
<div id="son">
<div id="one"></div>
<div id="two" title="第一个图" style="height:100%">50%</div>
<div id="one"></div>
<div id="three" title="第二个图" style="height:65%">65%</div>
<div id="one"></div>
<div id="four" title="第三个图" style="height:80%">80%</div>
<div id="one"></div>
<div id="five" title="第四个图" style="height:90%">90%</div>
<div id="one"></div>
<div id="six" title="第五个图" style="height:100%">100%</div>
<div id="one"></div>
</div>
<div id="bor" title="报表图">点击查看完整报表</div>
</div>
</body>
</html>
结果图如下,其中的所有显示均靠代码实现