js控制元素左右缓慢移动和页面上下缓慢移动

系统管理员 2023-10-04 18:37 24阅读 0赞

左右移动：有快到慢

![1a2365dad24f4f9895b547ccd12619ad.gif][]

页面上下移动：

![fdabf630b7984aadb5fd1b1613572e55.gif][]

左右移动代码：

上下移动代码：

<!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>滚动事件</title>
        <script src="./js/animation.js"></script>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            html,
            body {
                height: 100%;
            }
    
            .box {
                position: relative;
                width: 1200px;
                height: 100%;
                margin: 0px auto;
            }
    
            .box .sidbar {
                position: absolute;
                top: 50%;
                right: 0px;
                width: 50px;
                height: 100px;
                margin-right: -60px;
                background-color: red;
            }
    
            /* .box .sidbar {
                position: fixed;
                top: 0px;
                right: 0px;
                width: 50px;
                height: 100px;
                margin-right: 110px;
                background-color: red;
            } */
    
            .box .sidbar .back {
                display: none;
                font-size: 12px;
                margin-top: 80px;
            }
    
            .header {
                width: 100%;
                height: 414px;
                background-color: skyblue;
            }
    
            .banner {
                width: 100%;
                height: 300px;
                background-color: orange;
            }
    
    
            .main {
                width: 100%;
                height: 1000px;
                background-color: grey;
            }
    
    
            .footer {
                width: 100%;
                height: 500px;
                background-color: purple;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="sidbar">
                <div class="back"><a href="javascript:;">返回首页</a></div>
            </div>
            <div class="header">头部区域</div>
            <div class="banner">轮播图区域</div>
            <div class="main">主体内容区域</div>
            <div class="footer">页脚部分</div>
        </div>
    
        <script>
            var box = document.querySelector(".sidbar");
            var back = document.querySelector(".back");
            document.addEventListener("scroll", function () {
                // console.log(window.pageYOffset);
                if (window.pageYOffset > 414) {
                    box.style.position = "fixed";
                    box.style.top = "0px";
                    box.style.marginRight = "110px";
                } else {
                    box.style.position = "absolute";
                    box.style.top = "50%";
                    box.style.marginRight = "-60px";
                }
                if (window.scrollY > 714) {
                    back.style.display = "block";
                } else {
                    back.style.display = "none";
                }
            })
    
            back.addEventListener("click", function () {
                scrollV(back, 0);
            })
    
        </script>
    </body>
    
    </html>

Js代码：

[1a2365dad24f4f9895b547ccd12619ad.gif]: https://img-blog.csdnimg.cn/1a2365dad24f4f9895b547ccd12619ad.gif
[fdabf630b7984aadb5fd1b1613572e55.gif]: https://img-blog.csdnimg.cn/fdabf630b7984aadb5fd1b1613572e55.gif