JS应用——页面底部弹窗随导航条移动缓慢移动

最新推荐文章于 2021-06-05 02:42:00 发布

嘻嘻哈哈xh

最新推荐文章于 2021-06-05 02:42:00 发布

阅读量543

点赞数

本文链接：https://blog.csdn.net/weixin_45464787/article/details/99220258

版权

很多网页都有右下角弹窗，比如广告或者一些提示框，那么如何用JS达到一种滑动条移动时，弹窗逐渐移动的效果。

首先这种效果可以叫做缓冲运动，其速度会随着元素与目标点距离而变慢。

我们看看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{width: 200px;height: 300px;background: red;position: absolute;right: 0;bottom: 0;}
        body{height: 2000px;}
    </style>
    <script>
    window.onscroll=function(){
        var oDiv=document.getElementById("div1");
        var scrollTop=document.documentElement.scrollTop;
        
        navmove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
    }

    var timer=null;
    function navmove(target){
        var oDiv=document.getElementById('div1');

        clearInterval(timer);
        timer=setInterval(function(){
            speed=(target-oDiv.offsetTop)/8;
            speed>0?Math.ceil(speed):Math.floor(speed);

            if(target==oDiv.offsetTop){
                clearInterval(timer);
            }
            else{
                oDiv.style.top=oDiv.offsetTop+speed+'px';
            }
        },30);
    }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>