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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
基于js实现数组相邻元素上移下移
May 19 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jquery自定义表格样式
2015/11/23 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
python去掉行尾的换行符方法
2017/01/04 Python
python分析作业提交情况
2017/11/22 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Python关于反射的实例代码分享
2020/02/20 Python
django项目中新增app的2种实现方法
2020/04/01 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
应届生服务员求职信
2013/10/31 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
会议欢迎标语
2014/06/30 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
道士塔读书笔记
2015/06/30 职场文书
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js