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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
javascript之bind使用介绍
Oct 09 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
Vuex的actions属性的具体使用
Apr 14 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
重置版游戏视频
2020/04/09 魔兽争霸
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
php格式化日期实例分析
2014/11/12 PHP
php判断表是否存在的方法
2015/06/18 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
优秀社区干部事迹材料
2014/02/03 职场文书
横店影视城导游词
2015/02/06 职场文书
简单的辞职信模板
2015/05/12 职场文书
2016春节放假通知范文
2015/08/18 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python