鼠标/手指相对于元素的坐标:鼠标或手指当前的位置 - 元素距离文档的位置

px转百分比:px / 文档尺寸 * 100

获取手指触摸在屏幕中相对于元素的坐标(px转百分比):

  1. $('#div').on('click',function(e){
  2.  
  3. //获取手指抬起时在文档中的位置
  4. e = e.originalEvent.changedTouches[0];
  5. //计算偏移值,获取手指相对于元素的坐标
  6. var pageX = e.pageX-$(this).offset().left, pageY = e.pageY-$(this).offset().top;
  7. //px转百分比
  8. pageX = pageX / $(this).width() * 100;
  9. pageY = pageY / $(this).height() * 100;
  10.  
  11. });

鼠标/手指相对于元素的坐标(px转百分比)的更多相关文章

  1. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  2. js 获取 鼠标位置 和获取元素位置

    ]; body.addEventListener("mousemove", outpostion); function outpostion() { console.log(&qu ...

  3. [WPF]获取鼠标指针下的元素

    原文:[WPF]获取鼠标指针下的元素   [WPF]获取鼠标指针下的元素 周银辉 以前写过一些GetElementUnderMouse之类的函数,要用到坐标换算而显得有些麻烦(特别是当元素有XXXTr ...

  4. cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

    1 1 cursor CSS属性定义鼠标指针悬浮在元素上时的外观. https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor 概述 cursor  ...

  5. jquery获取当前元素的坐标

    jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或  var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...

  6. win10 uwp 获得元素绝对坐标

    有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用. 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标. 首先需要获得元素,如果没有获得元素,那么如何得到他的坐标? ...

  7. WPF如何得到一个在用户控件内部的元素的坐标位置

    例如有这样一个用户控件: <UserControl d:DesignHeight="100" d:DesignWidth="200" ...> &l ...

  8. 2018-8-10-win10-uwp-获得元素绝对坐标

    title author date CreateTime categories win10 uwp 获得元素绝对坐标 lindexi 2018-08-10 19:16:51 +0800 2018-2- ...

  9. dotnet 读 WPF 源代码笔记 布局时 Arrange 如何影响元素渲染坐标

    大家是否好奇,在 WPF 里面,对 UIElement 重写 OnRender 方法进行渲染的内容,是如何受到上层容器控件的布局而进行坐标偏移.如有两个放入到 StackPanel 的自定义 UIEl ...

随机推荐

  1. 禁止root用户远程登录

    Linux修改ssh端口22 vi /etc/ssh/ssh_config vi /etc/ssh/sshd_config 然后修改为port 8888 以root身份service sshd res ...

  2. 《IBM BPM实战指南》读书笔记

    理论 BPM不是一个IT术语,更不是因技术的发展而起源的,相反,BPM自始至终都是管理学的术语和概念.它关注的一直都是效率.成本.利润.质量等核心问题.BPM是一门学科和一种方法论,只是现代的企业管理 ...

  3. javascript 模式(2)——单例模式

    单例模式是一种非常极端的模式,它保证了一个类在整个应用程序域中只有一个实体,意味着当你多次创建某一个类的实例的时候它们都是第一次创建的那个. 在Java或c#环境实现单例模式很简单,只需要定义静态变量 ...

  4. CSS3——3D旋转图(跑马灯效果图)

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

  5. iOS-私有API与runtime

    转载:http://www.jianshu.com/p/6167b9ce7af8 序 有朋友在做类似iTool的功能,跟我聊起来,这几天闲,就写了一个demo,不是正经做这个,还很粗略,具体干货诸位等 ...

  6. mysql存储过程详解

    mysql存储过程详解 1.      存储过程简介   我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的S ...

  7. Android中的AlertDialog使用示例四(多项选择确定对话框)

    在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框,AlertDialog实现方法为建造者模式. ...

  8. Android自定义View4——统计图View

    1.介绍 周末在逛慕课网的时候,看到了一张学习计划报告图,详细记录了自己一周的学习情况,天天都是0节课啊!正好在学习Android自定义View,于是就想着自己去写了一个,这里先给出一张慕课网的图,和 ...

  9. JAVA匿名内部类

    首先定义一个抽象类Computer public abstract class Computer { //抽象类是不可以常见对象的 int a=1; public abstract void onli ...

  10. 【android 开 发 】 - Android studio 下 NDK Jni 开发 简单例子

    Android 开发了一段时间,一方面 ,感觉不留下点什么.有点对不起自己, 另一方面,好记性不如烂笔头,为了往后可以回头来看看,就当做是笔记,便决定开始写博客.废话不多说 ! 今天想搞一搞 ndk ...