边栏层滚动运动缓存

全栈程序员站长

发布于 2022-07-06 17:08:35

5030

大家好，又见面了，我是全栈君

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>側边滚动运动</title>
        <style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				position: absolute;
				background: green;
				right: 0px;
			}
			body {
				height: 1000px;
			}

        </style>
    </head>

    <script  type="text/javascript">
        window.onload = function() {

            document.onscroll = function() {
                var oDiv1 = document.getElementById("div1");
                var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var iClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
                var i = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2;
                //oDiv1.style.top = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2 + "px";
                // oDiv1.innerHTML = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2 + "px";
                startMove(oDiv1, parseInt(i));//paserInt是防止抖动，目标点取整
            };

            var oTimer = null;
            function startMove(obj, iTarget) {
                clearInterval(oTimer);

                oTimer = setInterval(function() {
                      //速度
                    var iSpeed = (iTarget - obj.offsetTop) /8;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    //速度取整
                    if (obj.offsetTop == iTarget) {
                        clearInterval(oTimer);
                    } else {
                        obj.style.top = obj.offsetTop + iSpeed + "px";//层运动
                    };
                }, 30);
            };
        };
    </script>
    <body>
        <div id="div1">

        </div>
    </body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/116918.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年1月1，如有侵权请联系 cloudcommunity@tencent.com 删除

java