【侧边栏滑动】-js实战篇

最新推荐文章于 2024-04-22 16:26:35 发布

悠悠~飘

最新推荐文章于 2024-04-22 16:26:35 发布

阅读量370

点赞数 3

分类专栏： js实战篇文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_48813932/article/details/123384268

版权

js实战篇专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            left: -300px;
        }
        
        .box-left {
            position: absolute;
            width: 300px;
            background-color: aquamarine;
            height: 100vh;
        }
        
        .box-right {
            position: absolute;
            width: 750px;
            background-color: bisque;
            height: 100vh;
            left: 300px;
        }
        
        button {
            width: 100px;
            height: 100px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-left">

        </div>
        <div class="box-right">
            <button>点击</button>
           
        </div>
    </div>
</body>
<script>
    var button = document.getElementsByTagName("button")[0];
    var box = document.getElementsByClassName("box")[0];
    button.onclick = function() {
        var left = window.getComputedStyle(box).left;
        if (left == "-300px") {
            box.style.left = 0;
        } else {
            box.style.left = "-300px"
        }
    }
</script>

</html>

实例效果

悠悠~飘

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【侧边栏滑动】-js实战篇

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫