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>

在这里插入图片描述结果图如下，其中的所有显示均靠代码实现

JavaScript初学——jQuery中实现动画的功能（以报表类型演示）

猜你喜欢