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

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

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

$('#div').on('click',function(e){

    //获取手指抬起时在文档中的位置
e = e.originalEvent.changedTouches[0];
//计算偏移值,获取手指相对于元素的坐标
var pageX = e.pageX-$(this).offset().left, pageY = e.pageY-$(this).offset().top;
//px转百分比
pageX = pageX / $(this).width() * 100;
pageY = pageY / $(this).height() * 100; });

鼠标/手指相对于元素的坐标(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. 基于小脚丫的ADC081S101 电压采集595数码管显示

    RTL结构图 采集模块运用SPI 通讯 MISO方式收集数据 module ad_collect(input sddata,input rst_n,output reg cs,output reg s ...

  2. 十一个行为模式之解释器模式(Interpreter Pattern)

    定义: 定义一个语言的文法,可以使用一个解释器来解释其文法.定义终结符和非终结符的统一接口,并使用抽象对象建立非终结符与其它元素的关联. 结构图: AbstractExpression:抽象表达式类, ...

  3. jQuery Mapael – 呈现动态的矢量地图

    jQuery Mapael 是基于 Raphael.js 的一个 jQuery 插件,可以显示动态矢量地图.例如,使用 Mapael 可以显示国家能够点击的世界地图.此外,你可以用圈,方形或者图片来标 ...

  4. jQuery拉开关闭帷幕

    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/7.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  5. HTML5 随机弹跳的小球

    查看效果:http://keleyi.com/a/bjad/tc1y11dy.htm Chrome效果图: 火狐效果图:推荐:http://hovertree.com/texiao/css3/18/ ...

  6. Ajax表单异步上传(包括文件域)

    起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试 先是尝试了一下 "jQu ...

  7. Java泛型介绍——HashMap总结

    今天在编程中,需要使用到Hashmap来存储和传递数据,发现自己学习Java这么久,实际上对泛型依旧知之甚少,搜索整理了一下HashMap的使用. HashMap的声明初始化,因为泛型的原因,起两个参 ...

  8. 设置Hyper-V下Linux机器的网卡(转载)

    今天需要再安装一台CentOS虚拟机,一时心血来潮,选择了一个basic server而不是之前选择的Desktop.安装之后依旧没有网卡,意料之中,呵呵.没有network,没有ifcfg-eth0 ...

  9. 联想A880 DIY 换触摸屏屏幕

    今年初入手的Lenovo A880手机,由于摔坏了屏幕不过能正常显示,咨询了联想的售后,说触摸屏和显示屏是分离的,换触摸屏需要280左右 为发挥DIY的精神,准备自己来处理这个屏幕 第一步:购买屏幕, ...

  10. [DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event

    [DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event   事件 事件(Event)是用来通知代码,一些有趣的事情发生了. 每一个Event都会被一个E ...