鼠标/手指相对于元素的坐标(px转百分比)

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

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;

});
时间: 2024-10-12 16:15:45

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

for-计算元素和坐标

运用for循环计算元素和坐标,做出这样一个小玩意出来 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 7 <style> 8 div { width:50px; heigh

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

原文:[WPF]获取鼠标指针下的元素   [WPF]获取鼠标指针下的元素 周银辉 以前写过一些GetElementUnderMouse之类的函数,要用到坐标换算而显得有些麻烦(特别是当元素有XXXTransform的时候) 今天看到Mouse类居然有一个DirectlyOver属性,可以获得鼠标下的元素, 很奇怪,我的MSDN文档以及VS2008智能提示中都没有显示该属性,但反编译一下可以看到. 但必须注意到的一点是,WPF控件是由各个元素复合而成的,但Mouse类可不知道这概念,所以不要期望它

js实例_当鼠标移动到某个元素上时在元素下面显示一段提示文字

效果: 当鼠标不在自动登录上时,只显示自动登录这个表单,下面的div提示则隐藏. 当鼠标移动到自动登录这个表单时,则显示下面的div提示,当鼠标移出时再将其隐藏 代码实现与原理: HTML代码: <body> <input type="checkbox" />自动登录 <div id="div1">不要再玩游戏啦!!!</div> </body> CSS代码:给id为div1的元素做一下修饰,并且将其最开始

如何防止鼠标移出移入子元素触发mouseout和mouseover事件

如何防止鼠标移出移入子元素触发mouseout和mouseover事件:关于mouseout和mouseover事件这里就不多介绍了,具体可以参阅javascript的mouseout和mouseover事件详解一章节. 这两个事件有一个共同特点,那就是当鼠标移入或者移出子元素的时候都会触发对应的事件,这个往往在实际应用中是不需要的,或者说能够带来很大的困扰,下面就通过实例代码介绍一下如何避免此影响.代码实例如下: <!DOCTYPE html> <html> <head&g

鼠标指针被高层元素挡住时,触发下层元素的鼠标事件

在做如下图这种拖拽效果的时候,遇到一个问题: 被拖拽的元素一直位于一个比较高的层,且一直跟随鼠标移动,这样会挡住鼠标,导致其无法触发下层元素的任何事件.这样下层的元素就无法响应拖拽的事件了. 受到这篇文章的启发:http://www.vinylfox.com/forwarding-mouse-events-through-layers/ 最终实现的思路是,在mouseover事件中: 1.隐藏高层元素 2.根据坐标获取当前位置的最高层DOM 3.手动触发事件 element.hide(); va

BaiduMap 鼠标绘制矩形选框四个顶角坐标的获取

雪影工作室版权全部.转载请注明[http://blog.csdn.net/lina791211] 1.博文产生原因 在使用百度Map开放API进行开发的时候,遇到了一个需求,非常easy的一个需求. →用户须要在地图上画一个矩形,依据矩形的边界值查询数据(主要在卫星数据的时空检索上使用) 没有想到的是,我翻遍了百度Map的百度地图JavaScript API,愣是没有找到相关的操作.在度娘上问了一圈小伙伴,没发现有这个需求的. 真的伤心 2.实现机制 Step1:综合考虑现有需求,针对须要选择空

Javascript获取元素的坐标

如何获得元素在页面中的坐标 HTML所有的元素都具有下面这5个只读属性 offsetLeft 元素边框距页面左边界的距离 offsetTop 元素边框距页面上边界的距离 offsetWidth 元素的宽度(左右边框的跨度) offsetHeight 元素的高度(上下边框的跨度) offsetParent 返回已经定位的祖先元素,如果没有,则返回body或null.

如何解决鼠标移动到子元素 会触发父元素的mouseout事件

方法一. 用mouseleave/mouseenter代替mouseover/mouseout[最佳方法] mouseover与mouseenter mouseover  => 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.mouseenter => 只有在鼠标指针从元素外穿入被选元素(到元素内)时,才会触发 mouseenter 事件. mouseout与mouseleave mouseout => 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouse

鼠标滑动显示不同页面的效果——————获取鼠标相对于整个页面的坐标

1 <html> 2 <head> 3 <style> 4 #oneDiv{ 5 position :absolute ; 6 left:200px; 7 top:100px; 8 width:300px; 9 border:1px solid 10 } 11 </style> 12 </head> 13 14 <body> 15 <div id="oneDiv"> 16 <p> 17 亚太