javascript高级运动缓冲菜单

最新推荐文章于 2020-12-26 12:02:26 发布

原创最新推荐文章于 2020-12-26 12:02:26 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨JavaScript高级动画技巧，重点讲解如何创建平滑的缓冲效果来实现交互式菜单的动态展示。通过理解缓动函数和时间流逝的概念，读者将能够为自己的Web应用增添更丰富的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
            width: 100px;
            height: 150px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script>
            window.onload=function (ev) {
                var oDiv=document.getElementById("div1");
                var scrollTop=document.documentElement.scrollTop||document
                    .body.scrollTop;
                //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+
                       // scrollTop+'px';
                startMove((document.documentElement.clientHeight-oDiv.offsetHeight)/2+
                scrollTop)
            };
            var  timer=null;
            function startMove(iTarget) {
                var oDiv=document.getElementById("div1");
                clearInterval(timer);
                timer=setInterval(function () {
                    var speed=parseInt((iTarget-oDiv.offsetTop)/4);
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if (oDiv.offsetTop==iTarget){
                        clearInterval(timer);
                    }
                    else {
                        document.title=iTarget;
                        document.getElementById("tex1").value=oDiv.offsetTop;
                        oDiv.style.top=oDiv.offsetTop+speed+'px';
                    }
                },30)
            }

    </script>
</head>
<body style="background:gold;height: 2000px">
<div id="div1"></div>
<input id="tex1" type="text" style="position: fixed;right: 0;top: 0">


</body>
</html>