JavaScript原生实现广告栏滑动

最新推荐文章于 2022-06-10 15:34:57 发布

清水l

最新推荐文章于 2022-06-10 15:34:57 发布

阅读量917

点赞数

分类专栏： JavaScript原生案例文章标签： JavaScript原生实现广告栏滑动 JavaScript JavaScript原生 JavaScript广告栏滑动

本文链接：https://blog.csdn.net/shenkeding9350/article/details/79138575

版权

JavaScript原生案例专栏收录该内容

8 篇文章 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部分

<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>

html和css部分

<!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>
 
</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>