记录11 点击改变高度(动画)和位置,再点击变回

最新推荐文章于 2021-06-28 16:40:08 发布

WMY10001

最新推荐文章于 2021-06-28 16:40:08 发布

阅读量313

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/WMY10001/article/details/98649562

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>点击改变高度(动画)和位置,再点击变回</title>
    <style>
        #gao {
            background-color: aquamarine;
            width: 100%;
            height: 70%;
            position: absolute;
            bottom: 0;
        }
        #dian {
            width: 98%;
            height: 40px;
            position: absolute;
            top: 50%;
        }
    </style>
</head>
<body style="height:800px;">
    <div id="gao">
        <div style="width:100%;height:100%;position: relative;">
            <button id="dian">点button改高改button位置</button>
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        document.getElementById('gao').style.height = '70%';
        $("#dian").click(function () {
            if (document.getElementById('gao').style.height == '70%') {
                $("#gao").animate({
                    height: "100%"
                });
                $("#dian").animate({
                    top: "0"
                })
            } else {
                $("#gao").animate({
                    height: "70%"
                });
                $("#dian").animate({
                    top: "30%"
                });
            }
        });
    })
	</script>
</body>
</html>

WMY10001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录11 点击改变高度(动画)和位置,再点击变回

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>点击改变高度(动画)和位置,再点击变回</title> <style> #gao { background-color: aqua...
复制链接

扫一扫

专栏目录