利用JavaScript怎么实现一个移动小精灵

这篇文章将为大家详细讲解有关利用JavaScript怎么实现一个移动小精灵,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

一、元素偏移量是什么?

 offset :中文就是偏离的意思, 使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

案例中使用到的属性:offsetLeft offseLtTopoffsetleft :返回元素距离父元素左侧的距离offsetTop:返回元素距离父元素上方的距离

二、使用步骤

1.想方设法:先获取到坐标 鼠标点击获取盒子中的位置,出现坐标?

代码如下(示例):

<script>
 	 <div class="box"></div>
    document.querySelector('.box').addEventListener('click',function(event){
      var x = event.pageX
      var y = event.pageY
      var left = this.offsetLeft
      var top = this.offsetTop
      console.log(x-left,y-top)
    })
  </script>

利用JavaScript怎么实现一个移动小精灵

注:

1、获取盒子 给盒子创建点击的事件监听事件
2、通过event 获取 页面上的坐标(pageX,pageY)
3、怎么获得? 使用pageX-盒子的offsetLeft获得x轴
使用pageY-盒子的offsetTop获得y轴

2.读入数据

在获得坐标的基础上 实现盒子移动

代码如下(示例):

利用JavaScript怎么实现一个移动小精灵

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注