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

前言

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



提示：以下是本篇文章正文内容，下面案例可供参考

一、元素偏移量是什么？

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>

注：

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

2.读入数据

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

代码如下（示例）：

总结

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

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

赞 (0)

相关推荐

  • 基于JS实现导航条之调用网页助手小精灵的方法

    1.概述 在网站中加入网页助手小精灵,当用户访问网站时,向用户问好,或是传递一些网站的重要信息,不仅可以帮助用户快速了解网站,而且可以让用户对该网站留下深刻的印象.本实例将介绍通过JavaScript调用网页助手小精灵的方法. 2.技术要点 本实例主要通过Microsoft的ActiveX组件Microsoft Agent实现.Microsoft Agent提供了很多控制Agent角色的方法,下面进行详细介绍. a. Load()方法:用于读入要使用的角色,该方法包括两个参数,一个用于指定角色的

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

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

    前言 提示: 今天学习了一个js的小案例,来和可乐一起学习探讨下吧 skr~ 效果: 提示:以下是本篇文章正文内容,下面案例可供参考 一.元素偏移量是什么? offset :中文就是偏离的意思, 使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 案例中使用到的属性:offsetLeft offseLtTopoffsetleft :返回元素距离父元素左侧的距离offsetTop:返回元素距离父元素上方的距离 二.使用步骤 1.想方设法:先获取到坐标 鼠标点击获取盒子中的位

  • JavaScript仿微博输入框效果(案例分析)

    JavaScript仿微博输入框效果(案例分析)

    这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </h

  • JavaScript中校验银行卡号的实现代码

    1.先引入jquery.js 2.接着引入luhmCheck.js //银行卡号Luhm校验 3.看下面的案例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • JavaScript组合设计模式--改进引入案例分析

    本文实例讲述了JavaScript组合设计模式--改进引入案例.分享给大家供大家参考,具体如下: 对于组合设计模式: (1)组合模式中把对象分为两种(组合对象,和叶子对象)  (2)组合对象和叶子对象实现:同一批操作  (3)对组合对象执行的操作可以向下传递到叶子节点进行操作  (4)这样就会弱化类与类之间的耦合  (5)他常用的手法是把对象组合成属性结构的对象 根据组合模式的这些特性我们改写代码如下: 由于用到了接口检验所以我们先引入接口文件代码 //定义一个静态方法来实现接口与实现类的直接检

  • JavaScript setTimeout与setTimeinterval使用案例详解

    这两个方法都可以用来在固定的时间段后去执行一段javascirpt代码,不过两者各有各的应用场景. 实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 虽然表面上看来setTimeout只能应用在on-

  • JavaScript axios安装与封装案例详解

    1.下载axios插件 cnpm install axios -S 2.在main.js引入axios import axios from 'axios' Vue.prototype.$http = axios 3.创建axios实例 let service = axios.create({ baseURL: baseUrl, // url = base api url + request url withCredentials: true, // send cookies when cross

  • JavaScript 拖拉时间之drag案例详解

    目录 DragEvent 接口 DataTransfer 接口概述 DataTransfer 的实例属性 DataTransfer.dropEffect DataTransfer.effectAllowed DataTransfer.files DataTransfer.types DataTransfer.items DataTransfer 的实例方法 DataTransfer.setData() DataTransfer.getData() DataTransfer.clearData()

  • JavaScript实现动态生成表格案例详解

    JavaScript实现动态生成表格案例详解

    目录 前言 实现思路 实现代码  实现效果 前言 在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除. 实现思路 先创建一个表格和一个表单,将表单中输入的内容动态添加进表格中,表单页面右上角有一个关闭按钮,当点击时,可以将表单页面关闭并将表格页面显示.为了页面美观,我将添加数据的按钮放在了表格的<tfoot></tfoot>中,将动态生成的表格数据添加到<tbody><tbody>

  • javascript内置对象Date案例总结分析

    javascript内置对象Date案例总结分析

    目录 Date的基本使用 格式化时间 1.格式化日期-年,月,日 2.格式化时,分,秒 获取Date总的毫秒数(时间戳) 案例-网页倒计时核心算法(重要) 结语 Date的基本使用 内置对象Date是构造函数,用new创建对象,无参数时返回当前时间,可加参数返回特定时间 //内置对象Date是构造函数,用new创建对象,无参数时返回当前时间,可加参数返回特定时间 var now_time = new Date(); console.log(now_time); // 年月日之间可以用-或者/ v

  • JavaScript图片放大技术(放大镜)实现代码分享

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐