运动与游戏开发4------缓冲菜单案例

最新推荐文章于 2024-08-09 21:30:00 发布

捞比丶

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量100

点赞数

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_41915936/article/details/107417698

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

缓冲菜单案例

<!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>
            #menu{width: 100px; height: 100px; background-color: red; position: absolute; right: 0px}
            *{margin: 0px; padding: 0px}
        </style>
        <script>
            window.onload = function(){
                var oMenu = document.getElementById("menu");
                //获取当前的目的值

                //获取滚动条滚动的距离
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                //获取屏幕可视化高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                
                var iH = parseInt(scrollTop + (windowHeight - oMenu.offsetHeight) / 2);

                startMove(iH);


                window.onscroll = function(){
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    var iH = parseInt(scrollTop + (windowHeight - oMenu.offsetHeight) / 2);

                    startMove(iH);
                }
            }

            var timer = null;
            function startMove(iTarget){
                var oMenu = document.getElementById("menu");
                clearInterval(timer);
                timer = setInterval(function(){
                    //计算速度
                    var speed = (iTarget - oMenu.offsetTop) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    //运动和停止分开
                    if(oMenu.offsetTop == iTarget){
                        clearInterval(timer);
                    }else{
                        oMenu.style.top = oMenu.offsetTop + speed + 'px';
                        document.title = oMenu.offsetTop + ", " + iTarget;
                    }

                }, 30);
            }
        </script>
    </head>
    <body style = 'height: 3000px'>
        <div id = 'menu'></div>
    </body>
</html>

在这里插入图片描述
需要注意的有

 var iH = parseInt(scrollTop + (windowHeight - oMenu.offsetHeight) / 2);

这里要记得取整，不然可能会出现菜单上下振动的情况

捞比丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运动与游戏开发4------缓冲菜单案例

缓冲菜单案例<!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"
复制链接

扫一扫

专栏目录