层的缓冲运动

最新推荐文章于 2024-04-13 16:00:00 发布

zhanyan_x

最新推荐文章于 2024-04-13 16:00:00 发布

阅读量987

点赞数

分类专栏： javascript 文章标签：层的缓冲运动缓冲运动运动

本文链接：https://blog.csdn.net/zhanyan_x/article/details/41120391

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!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">
			#divMove {
				width: 100px;
				height: 100px;
				position: absolute;
				top: 200px;
				left:0px;
				background: red;
			}
        </style>
    </head>
    <script type="text/javascript">
        window.onload = function() {
            //获取对象
            var oDivMove = document.getElementById("divMove");
            var oBtnMove = document.getElementById("btnMove");
            oBtnMove.onclick = function() {
                oDivMove.offsetLeft==0?startMove(oDivMove, 600):startMove(oDivMove, 0);//如果left是0就往右走，否则就往左走

            };
        };

        var oTimer = null;
        //定时器
        
        function startMove(obj, iTarget) {
            clearInterval(oTimer);
            //关闭定时器

            oTimer = setInterval(function() {
                var iSpeed = (iTarget - obj.offsetLeft) / 10;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//速度取整数，防止前后波动
                if (obj.offsetLeft == iTarget) {//判断是否到达终点
                    clearInterval(oTimer);
                    //关闭定时器
                } else {
                    obj.style.left = obj.offsetLeft + iSpeed + "px";//层运动
                    document.getElementById("divMove").innerHTML = "速度："+iSpeed+'</br>'+'距离：'+obj.offsetLeft + "px";
                };
            }, 30);

        }
    </script>
    <body>
        <div id="divMove">

        </div>
        <input type="button" id="btnMove" value="开始运动" />
    </body>
</html>

zhanyan_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
层的缓冲运动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 缓冲运动 #divMove { width: 100px; height: 100px; posit
复制链接

扫一扫