原生JavaScript实现小球按原轨迹进行返回的案例

实现效果:滑动小球,按住鼠标拉着小球,一直按着一直拉着,当松开鼠标时,让小球按原来的轨迹返回。


要实现这个效果要明白以下的步骤:

1.为元素设置鼠标点击的事件,只有鼠标往下点,小球才会移动,从而跟着鼠标移动

mousedown

2.为元素设置移动鼠标事件。

mousemove

3.相应的mousedown就要有mouseup

4.原轨迹用数组去存,就是存他的left值和top值。

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动轨迹的fa小球</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            background-color: hotpink;
            position: absolute;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div></div>
<!--滑动小球,按住鼠标拉着小球,一直按着一直拉着,当松开鼠标时,让小球按原来的轨迹返回。-->
<script>
    /*定义一个数组去存原始滑动的值,返回后进行位置的记录,一次从最后返回
    * 可以用二维数组,但推荐用对象的形式,比较好一些。
    * */
    var positions = [{left: 0, top: 0}];
    /*我对整个文档进行MouseMove事件,left和top变量是指鼠标移动的那个点参照于浏览器的那个距离*/
    var div = document.querySelector("div");

    /*
    * 此时设置的鼠标点下去的位置随小球移动,也就是不在是鼠标在小球的中心
    * 而是刚开始鼠标点击在哪里,在之后的移动中鼠标始终在小球的初始位置
    * */
    document.onmousedown = function (event) {
        var downClientX = event.clientX;  //开始点击下的鼠标位置的X Y坐标
        var downClientY = event.clientY;
        var downDivLeft = div.offsetLeft;  //记录开始的(最新的)div的当前left top 坐标
        var downDivTop = div.offsetTop;

        document.onmousemove = function (event) {
            //计算当前元素要移动的left和top值
            var left = downDivLeft + (event.clientX - downClientX);
            var top = downDivTop + (event.clientY - downClientY);

            //限制左上边距
            left = left < 0 ? 0 : left;
            top = top < 0 ? 0 : top;

            //限制右边和下边的边距,假设设置在1300和600内,当然你可以一开始设置div,然后获取边际值
            left = left > 1300 ? 1300 : left;
            top = top > 600 ? 600 : top;

            div.style.left = left + "px";
            div.style.top = top + "px";
            positions.push({left: left, top: top});

        }
    }

    //取消documment的按钮提起的事件,并且返回原来数组存的坐标,并且从最后坐标开始返回
    document.onmouseup = function () {
        document.onmousemove = null;
        setTimeout(function step() {
            var pop = positions.pop();
            div.style.left = pop.left + "px";
            div.style.top = pop.top + "px";
            //当positions为0时,返回,结束。我们最开始的位置就是在positions==0
            console.log(positions);
            /*如果是positions==0,用这个也可以,但是歪打正着,因为positions是空数组(对象)是,会隐形成undefined,undefined跟0比较是true*/
            if (positions.length == 0) return;
            setTimeout(step, 20);
        }, 0)

    };
</script>
</body>
</html>

阅读更多

没有更多推荐了,返回首页