JS特效：两侧广告跟随

最新推荐文章于 2024-03-27 15:40:52 发布

Cathy _Mmm

最新推荐文章于 2024-03-27 15:40:52 发布

阅读量1.3k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46535360/article/details/108894964

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.首先分析一下，两侧广告跟随，就是在鼠标向下滚动时，左右两幅图也跟着向下滚动相等的距离
2.可以知道假设鼠标向下滚动了100px的话，那么两个图片也是向下滚动了100px，他的位置就是100加上图片距离父标签的距离
3.现在还要实现一个图片的缓慢移动，就是设置一个计时器，分步骤将图片一步一步的走到最终的位置
4.用当前屏幕被卷去的长度在加上距离上屏幕的高度就是图片应该到达的位置y，此时用y减去当前图片距离顶部的距离，就是图片到达y的距离sum。
5.要实现缓慢移动的话可以将sum/10,图片一点一点的移动就实现了缓慢移动

代码如下

<body>
    <div class="head_p"></div>
    <div class="main_1"></div>
    <div class="main_2"></div>
    <div class="left_p"></div>
    <div class="right_p"></div>
    <script>
        var y = 0;
        var l = document.querySelector('.left_p');
        var r = document.querySelector('.right_p');
        window.onscroll = function () {
            var y = window.pageYOffset;
            animate(l, y + 100);
            animate(r, y + 100);
        }
        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(step);
                if (Math.abs(target - ele.offsetTop) < Math.abs(step)) {
                    ele.style.top = target + "px";
                    clearInterval(ele.timer);
                }
            }, 10);
        }
    </script>
</body>

Cathy _Mmm

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS特效：两侧广告跟随

1.首先分析一下，两侧广告跟随，就是在鼠标向下滚动时，左右两幅图也跟着向下滚动相等的距离2.可以知道假设鼠标向下滚动了100px的话，那么两个图片也是向下滚动了100px，他的位置就是100加上图片距离父标签的距离3.现在还要实现一个图片的缓慢移动，就是设置一个计时器，分步骤将图片一步一步的走到最终的位置4.用当前屏幕被卷去的长度在加上距离上屏幕的高度就是图片应该到达的位置y，此时用y减去当前图片距离顶部的距离，就是图片到达y的距离sum。5.要实现缓慢移动的话可以将sum/10,图片一点一点的移动
复制链接

扫一扫