JavaScript原生实现广告栏滑动

今天药忘吃喽~ 2022-06-01 06:49 235阅读 0赞

全部代码

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>两侧广告栏js原生代码实现</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                position: relative;
            }
            .ad{
                width: 100%;
                position: absolute;
                top: 150px;
            }
            .box-left{
                float: left;
                width: 150px;
                height: 300px;
                background-color: #aaa;
            }.box-right{
                 width: 150px;
                 height: 300px;
                 background-color: #aaa;
                 float: right;
             }
        </style>
        <script>
            window.onload = function () {
    
                //获取相关元素
                var ad = document.getElementsByClassName("ad")[0];
                var adtop = ad.offsetTop;
    
                window.onscroll = function () {
                    var stop = scroll().top
                    animate(ad, stop + adtop);
    
                    // console.log(ad.style.top);
                }
    
                //缓动动画封装
                function animate(ele, target) {
                    clearInterval(ele.timer);
                    ele.timer = setInterval(function () {
                        var step = (target - ele.offsetTop) / 10;
                        step = step > 0 ? Math.ceil(step) : Math.floor(step);
                        ele.style.top = ele.offsetTop + step + "px";
                        console.log(1);
                        if (Math.abs(target - ele.offsetTop) < Math.abs(step)) {
                            ele.style.top = target + "px";
                            clearInterval(ele.timer);
                        }
                    }, 25);
                }
    
                // scroll的封装
                function scroll() {
                    return {
                        "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
                        "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
                    }
                }
            }
        </script>
    </head>
    <body>
        <div class="box" style="height: 5000px">
            <div class="ad">
                <div class="box-left"></div>
                <div class="box-right"></div>
            </div>
        </div>
    </body>
    </html>

js部分

html和css部分