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

原创 2018年04月17日 18:16:00
实现效果:滑动小球,按住鼠标拉着小球,一直按着一直拉着,当松开鼠标时,让小球按原来的轨迹返回。


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

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>

html5小球移动

html> head> meta charset="utf-8"/> head> body onkeydown="test()"> h1>小球上下左右移动h1> canvas i...
  • W1365966490
  • W1365966490
  • 2013-06-14 15:26:18
  • 1113

JavaScript原生ajax示例

方法: (1)创建XMLHttpRequest对象,这个对象就是ajax请求的核心,是ajax请求和响应的信息载体,单是不同浏览器创建方式不同 (2)请求路径 (3)使用open方法绑定发送请...
  • u013063153
  • u013063153
  • 2016-07-11 10:12:56
  • 1424

HTML5实现射击移动小球

射击小球 var rad=8; var ctx; var vx; var posy; var vy=10; var a=2; var x; ...
  • sofeien
  • sofeien
  • 2014-11-19 13:36:53
  • 561

js实现小球抛物线轨迹运动的两种方式

js实现小球抛物轨迹运动的大致思路:   1、用setInterval()方法,进行间隔性刷新,更新小球位置,以实现动态效果    2、绘制小球和运动区域,运动区域可通过flex布局实现垂直居中   ...
  • u013420372
  • u013420372
  • 2017-03-20 02:02:17
  • 3310

自定义view实现随手指移动的小球及画轨迹

先直接上代码: step1.建立drawview.java package com.example.joky27.customview; import android.content...
  • julia27
  • julia27
  • 2017-04-18 12:12:04
  • 747

Java图形界面基础案例-飞行的小球

Java线程案例
  • MrInvincible
  • MrInvincible
  • 2016-04-01 13:36:38
  • 3002

Android Animation实现元素在屏幕上按照指定轨迹运动,以及出现NullPointerException的解决方案

因项目需要,在Android中实现了一个动画,当在Activity中点击特定按钮时,会在屏幕上添加一个ImageView,并按照指定的起点、终点,沿着特定的轨迹运动(例如直线)。 实现方法 实现思...
  • jzj1993
  • jzj1993
  • 2015-11-19 14:19:35
  • 1377

利用javascript实现原生简单ajax的方法。

利用javascript实现原生简单ajax的方法。  实现ajax之前必须要创建一个 XMLHttpRequest (IE6↑)对象。如果不支持创建该对象的浏览器,则需要创建 ActiveX...
  • linjy520
  • linjy520
  • 2017-03-16 14:22:19
  • 286

Android动画之旅(三)----6个小球移动的轨迹动画

动画组成:1.贝塞尔曲线和PathMeasure结合使用。2. mPathMeasure.getPosTan(float v,float [] pos ,float[] tan)的使用。3.通过动画0...
  • l540675759
  • l540675759
  • 2017-02-28 16:58:09
  • 1965

html5实现跳动的小球的功能

该功能实现小球跳动的效果,遇到墙壁就反弹回去,代码很简单。                     模拟动态的跳动的小球的效果             ...
  • baohanqing
  • baohanqing
  • 2013-12-30 20:35:05
  • 1347
收藏助手
不良信息举报
您举报文章:原生JavaScript实现小球按原轨迹进行返回的案例
举报原因:
原因补充:

(最多只允许输入30个字)