2020-09-20

最新推荐文章于 2024-09-21 09:29:16 发布

废物的自我修养记录

最新推荐文章于 2024-09-21 09:29:16 发布

阅读量63

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45989814/article/details/108689749

版权

js实现div简单回放路径

<style type="text/css">
        * {
            padding: 0;
            margin: 0
        }

        #box {
            width: 300px;
            height: 200px;
            background-color: gray;
            position: relative;

        }

        #tz {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            cursor: move;


        }

        #small {
            width: 300px;
            height: 170px;
            background-color: green
        }

        #closeBtn {
            display: block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            float: right;
            background-color: blanchedalmond
        }

        #hf {
            width: 100px;
            height: 30px;
            display: block;
            background-color: skyblue;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="box">
        <h3 id="tz">
            <a href="javascript:;" id="closeBtn">X</a>
        </h3>
        <div id="small"></div>


    </div>
    <a href="javascript:;" id="hfBtn">回放路径按钮</a>
    <script>
        var box = $id("box");
        var tz = $id("tz");
        var closeBtn = $id("closeBtn");
        var hfBtn = $id("hfBtn");
        //创建一个数组存放路径
        var positionArr = [];
        //当鼠标在tz按下的时候
        tz.onmousedown = function (e) {
            e = e || window.event;
            var startX = e.offsetX || e.layerX;
            var startY = e.offsetY || e.layerY;
            //当鼠标拖动的时候
            document.onmousemove = function (e) {
                e = e || window.event;
                var left = e.pageX - startX;
                var top = e.pageY - startY;
                //边界检测
                if (left < 0) {
                    left = 0;
                }
                if (top < 0) {
                    top = 0;
                }
                if (left > window.innerWidth - box.offsetWidth) {
                    left = window.innerWidth - box.offsetWidth
                }
                if (top > window.innerHeight - box.offsetHeight) {
                    top = window.innerHeight - box.offsetHeight
                }

                box.style.left = left + "px";
                box.style.top = top + "px";
                //移动后，获取鼠标坐标，存入数组中
                positionArr.push({ "left": box.style.left, "top": box.style.top })

            }
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }


        //回放按钮
        hfBtn.onclick = function () {
            var index = positionArr.length - 1;
            var timer = setInterval(function () {
                box.style.left = positionArr[index].left;
                box.style.top = positionArr[index].top;
                index--;
                if (index < 0) {
                    clearInterval(timer);
                    positionArr = [];
                }
            }, 100)
        }

        //关闭按钮
        closeBtn.onclick = function () {
            box.style.display = "none"
        }
    </script>