JavaScript实现移动小精灵的案例代码


Posted in Javascript onDecember 12, 2020

前言

提示:
今天学习了一个js的小案例,来和可乐一起学习探讨下吧 skr~
效果:


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实现移动小精灵的案例代码

总结

提示:这里对文章进行总结:
例如:以上就是今天的内容la,本文仅仅简单介绍了元素偏移的使用,元素偏移提供了大量能使我们快速便捷地处理数据的方法。谢谢支持

到此这篇关于JavaScript实现移动小精灵的案例代码的文章就介绍到这了,更多相关js 移动小精灵内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
易被忽视的js事件问题总结
May 14 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 #Vue.js
javascript中call,apply,bind的区别详解
Dec 11 #Javascript
使用js获取身份证年龄的示例代码
Dec 11 #Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
node koa2 ssr项目搭建的方法步骤
Dec 11 #Javascript
uni-app 自定义底部导航栏的实现
Dec 11 #Javascript
微信小程序实现音乐播放页面布局
Dec 11 #Javascript
You might like
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
关于Python作用域自学总结
2019/06/10 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
logging level级别介绍
2020/02/21 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
经典c++面试题四
2015/05/14 面试题
旺仔牛奶广告词
2014/03/20 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
房屋租房协议书范本
2014/12/04 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
浅析python中特殊文件和特殊函数
2022/02/24 Python