JS案例:小球拖动,记录轨迹,并原路返回

简介: JS案例:小球拖动,记录轨迹,并原路返回

附上代码:

<!DOCTYPE html>
<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: 100px;
                height: 100px;
                position: absolute;
                background: lightcoral;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <script>
            var arrX = [];//新建数组,记录小球的x轴路径
            var arrY = [];//新建数组,记录小球的y轴路径
            var i = 0;//小球移动时数组的第i项存进数组
            var stop;//小球的运动
            function Ball() {}//新建小球类
            Ball.prototype = {
                ball:null,//新建小球
                createBall: function () {//创建小球,添加到body中
                    this.ball = document.createElement("div");
                    document.body.appendChild(this.ball);
                    this.ball.className = "box";
                    this.ball.self = this;//引入小球的属性self指向Ball对象(this)
                    this.ball.addEventListener("mousedown", this.mouseHandler);//添加点击事件
                    return this.ball;
                },
                mouseHandler: function (e) {
                    if (e.type === "mousedown") {//当鼠标点击时添加移动事件给document,添加鼠标松开事件给小球,并且使用回调,每次执行一个函数,对e.type进行判断
                        this.addEventListener("mouseup", this.self.mouseHandler);
                        document.ball = this;//引入对象ball给document
                        document.boxObj = {//给document添加对象属性鼠标相对小球位置
                            x: e.offsetX,
                            y: e.offsetY
                        };
                        document.addEventListener("mousemove", this.self.mouseHandler);
                    } else if (e.type === "mousemove") {//鼠标移动时让小球位置等于鼠标在当前窗口的位置减去鼠标相对小球位置
                        this.ball.style.left = e.x - this.boxObj.x + "px";
                        this.ball.style.top = e.y - this.boxObj.y + "px";
                        arrX.push(this.ball.style.left);//小球每次移动将位置存入数组中
                        arrY.push(this.ball.style.top);
                    } else if (e.type === "mouseup") {//当鼠标松开时,解除监听事件并且执行自动返回函数
                        this.removeEventListener("mouseHandler", this.self.mouseHandler);
                        document.removeEventListener("mousemove", this.self.mouseHandler);
                        document.self = this;
                        i = arrX.length;
                        stop = setInterval(this.self.autoMove, 16);
                    }
                },
                autoMove: function () {//返回函数,当小球运动到初始状态时,取消Interval函数
                    document.self.style.left = arrX[i];
                    document.self.style.top = arrY[i];
                    if (i <= 0) {
                        arrX.length = 0;
                        arrY.length = 0;
                        clearInterval(stop);
                        return;
                    }
                    i--;
                }
            };
            //实例化小球,并且执行小球方法
            var ball = new Ball();
            ball.createBall();
        </script>
    </body>
</html>
相关文章
|
3月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
46 0
JS配合CSS3实现动画和拖动小星星小Demo
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
|
3月前
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
41 11
|
3月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
84 2
一个案例带你从零入门Three.js,深度好文!
|
3月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
186 0
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(四):成绩案例
Vue.js 2 项目实战(四):成绩案例
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(三):综合案例-小黑记事本
Vue.js 2 项目实战(三):综合案例-小黑记事本
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(二):图书管理案例
Vue.js 2 项目实战(二):图书管理案例
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(一):图片切换案例
Vue.js 2 项目实战(一):图片切换案例