鼠标点击，移动回放效果

最新推荐文章于 2023-10-09 08:52:13 发布

熬夜冠军Yifan

最新推荐文章于 2023-10-09 08:52:13 发布

阅读量223

点赞数

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/Yifanbaobao103/article/details/104911077

版权

以下内容CV大法就可以用
图片的话随便找一张就行

主要完成的是一个移动回放的效果
自己做着玩的毕竟在家无聊

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 48px;
            height: 40px;
            background: url(1.gif);
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box"></div>

    <script>
        let box = document.querySelector('#box')// 获取box
		
        let arr = [] // 定义一个空数组，获取到移动过程中鼠标的位置，最后根据这个数组来对box位置进行改变，实现对点击过后的效果实现

        document.onmousedown = function (e) {
            let res = {
                x: e.pageX,
                y: e.pageY
            }
            arr.push(res)
            // 点击时候记录点，添加到arr里面

            document.onmousemove = function (evt) {
                let res = {
                    x: evt.pageX,
                    y: evt.pageY
                }
                arr.push(res)
                // 移动过程添加点
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                // 鼠标抬起清空移动事件
                console.log(arr)
				// 设置延时器 开始对数组进行删除，并对Box的left和top进行赋值
				// 删除方式可以决定box的移动轨迹，是按鼠标的正向还是反向
                let times = setInterval(function () {
                    let p = arr.pop()
                    box.style.left = p.x + 'px'
                    box.style.top = p.y + 'px'

                    console.log(arr)
                    if (arr.length == 0) {
                    // 当length等与0相当于没有鼠标移动轨迹了，就可以清除延时器
                        clearInterval(times)
                    }

                }, 100)
            }

        }
    </script>
</body>

</html>

注：娱乐用法，后面还可以点击一张图，松开一个图。纯属娱乐，。。。。。。。。。。。。。。。。。。就是闲的发慌

熬夜冠军Yifan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标点击，移动回放效果

以下内容CV大法就可以用图片的话随便找一张就行主要完成的是一个移动回放的效果自己做着玩的毕竟在家无聊<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....
复制链接

扫一扫