首页 > 代码库 > 侧边栏层滚动缓存运动

侧边栏层滚动缓存运动

2024-08-02 14:39:37   227人阅读

<!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>

侧边栏层滚动缓存运动


联系
我们