标签:style ball 拖动 self 小球 JS mouseHandler document
<!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>
标签:style,ball,拖动,self,小球,JS,mouseHandler,document 来源: https://www.cnblogs.com/0811thomas/p/15782316.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。