jquery 获取鼠标和元素的坐标点

获取当前鼠标相对img元素的坐标
[javascript] view plaincopy
  1. $('img').mousemove(function(e) {  
  2.      varpositionX=e.pageX-$(this).offset().left; //获取当前鼠标相对img的X坐标  
  3.      varpositionY=e.pageY-$(this).offset().top; //获取当前鼠标相对img的Y坐标  
  4.      console.log(positionX+'   '+positionY);  
  5.  })  
获取当前鼠标相对浏览器的原点的坐标      
[javascript] view plaincopy
  1. $('img').mousemove(function(e) {      
  2.     var xx = e.originalEvent.x ||e.originalEvent.layerX || 0;      
  3.     var yy = e.originalEvent.y ||e.originalEvent.layerY || 0;           
  4.     console.log(xx+'   '+yy);            
  5. })  
获取当前鼠标相对html页面的原点的坐标         
[javascript] view plaincopy
  1. $('img').mousemove(function(e) {  
  2.     var pageX=e.pageX;          
  3.     var pageY=e.pageY;         
  4.     console.log(pageX+'   '+pageY);          
  5. })  

1,获取对象
var obj = $("#image");               

2,获取对象元素的位置(offset()方法)
var offset = obj.offset();
获取对象元素的位置,分别是元素的top和left,调用方法是:offset.left和offset.top,可知当前对象的左部和顶部位置。  

3,获取对象元素的宽度(width()方法)
var right = offset.left+obj.width();
实例中是获取对象的右下角位置,创建新窗口的左部位置。

4,获取对象元素的高度(height()方法)
   var down =offset.top+obj.height();
实例中是获取对象的右下角位置,创建新窗口的顶部位置。                              

5.获取对象相对于父元素的位置(position()方法)                      
var x = obj.position().top;                                  
var y =obj.position().left;
[javascript] view plaincopy
  1. <scripttype="text/javascript">  
  2. $(document).ready(function(){  
  3.          alert($(window).height());//浏览器当前窗口可视区域高度  
  4.         alert($(document).height());//浏览器当前窗口文档的高度  
  5.         alert($(document.body).height());//浏览器当前窗口文档body的高度  
  6.         alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin  
  7.         alert($(window).width());//浏览器当前窗口可视区域宽度  
  8.         alert($(document).width());//浏览器当前窗口文档对象宽度  
  9.         alert($(document.body).width());//浏览器当前窗口文档body的高度  
  10.         alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin  
  11. })  
  12. </script>   

转载于:https://www.cnblogs.com/taleche/p/6065545.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java上转型对象特点_Java 浅析三大特性之一继承

上文Java 浅析三大特性之一封装我们说到Java是一个注重编写类&#xff0c;注重于代码和功能复用的语言。Java实现代码复用的方式有很多&#xff0c;这里介绍一个重要的复用方式——继承。在介绍继承之前&#xff0c;我们要明确一点&#xff0c;继承是一个比较复杂的编写类的方式…

并口学习之一

1.由于windows并不是一个实时控制系统,通过并口只能最大输出100Khz的脉冲频率.这对于普通电机来说已经足够了. 但是如果对可支持200Khz及以上的电机来说,这真是个不好的消息.USB口等输出脉冲的最大速度可无限提高了.这变由外部接口卡的性能决定了.因此有些USB口卡支持最大脉冲输…

MSSQL优化之————探索MSSQL执行计划

原文链接&#xff1a;http://blog.csdn.net/no_mIss/archive/2006/11/09/1374978.aspx 作者&#xff1a;no_mIss QQ:34813284 时间&#xff1a;2006.11.07 23:30:00 环境&#xff1a;win2003 mssql2005 最近总想整理下对MSSQL的一些理解与感悟&#xff0c;却一直没有心思和…

java web的动静分离_Apache结合Tomcat实现动静分离的方法

实验环境Apache和Tomcat均安装在IP地址为192.168.153.136的主机上 主机操作系统为centos7 实验之前关闭防火墙 ,命令&#xff1a; systemctl stop firewalld 关闭seliunx &#xff0c;命令&#xff1a;setenforce 0 实验效果为Apache处理html静态资源&#xff0c;Tomcat处理jsp…

jquery调用WCF

1.添加新项&#xff1a;启用了Ajax的WCF。2.[ServiceContract(Namespace "")] [AspNetCompatibilityRequirements(RequirementsMode AspNetCompatibilityRequirementsMode.Allowed)] public class Service { [OperationContract] public st…

java 数组地图绘画_Java将地图转换为数组[Snippet]

让我们编写一个将Map值转换为String数组的Java程序。将映射值转换为数组示例包 网。javaguides。corejava ;导入 java。util。数组 ;导入 java。util。收藏 ;导入 java。util。HashMap ;导入 java。util。地图 ;公共 类 MapToArrayExample {public String [] mapValuesToArray…

【2016.11.16】HTML学习笔记

先是学习了思维导图的使用方法&#xff0c;然后自学了HTML 下面是自学的笔记 转载于:https://www.cnblogs.com/shan01/p/6071081.html

使用SharpZipLib.dll压缩zip

/// <summary> /// zip压缩 /// </summary> /// <param name"path">源文件夹路径</param> /// <param name"topath">目标文件路径</param> /// <returns>-1文件不存在,0未知…

php 日期时间 取日期,从PHP中的文本中提取日期,时间和日期范围

我正在构建一个本地事件日历,它采用RSS提要和网站抓取并从中提取事件日期.我之前已经问过如何从PHP here中的文本中提取日期,并在MarcDefiant时获得了一个很好的答案&#xff1a;function parse_date_tokens($tokens) {# only try to extract a date if we have 2 or more toke…

不同文件类型输出及ContentType表

//输出Response.Clear(); Response.BufferOutput false; Response.ContentEncoding System.Text.Encoding.UTF8; Response.AddHeader("Content-Disposition", "attachment;filename" HttpUtility.UrlEnco…

【2016.11.17】HTML学习笔记第二天

今天是自习 下面是我的自学内容 转载于:https://www.cnblogs.com/shan01/p/6074683.html

php 安装php soap.dll,php_soap.dll下载

php_soap.dll原因说明当你的系统出现&#xff1a;php_soap.dll缺失&#xff0c;php_soap.dll故障&#xff0c;php_soap.dll删除&#xff0c;开机php_soap.dll报错&#xff0c;php_soap.dll源码缺失&#xff0c;无法加载php_soap.dll&#xff0c;计算机丢失php_soap.dll&#xf…

firefox input file宽度失效

file样式设置.upload_bg{position:relative; text-align:center; } .upload_bg input {position:absolute; left:0px;*left:-10px; top:0px; height:19px; width:100%;*width:1px; filter:alpha(opacity0);opacity:0.0;} <input type"file" size1 style"w…

1.0 C++远征:数据的封装

4-1数据的封装 1.如何进行数据封装 ​ 未进行数据的封装&#xff0c;成员变量容易发生数据的泄露&#xff1a; ​ 进行数据的封装&#xff08;这是面向对象的思想&#xff09;&#xff0c;成员变量设为private属性&#xff0c;只能通过set和get方法来赋值和取值&#xff0c;提高…

windows彻底删除php,windows如何删除php

windows如何删除php2020-10-19 07:34:59windows删除php的方法&#xff1a;首先打开windows电脑&#xff1b;然后找到PHP文件夹并选择删除&#xff1b;接着以管理员的身份运行CMD实现MySQL的卸载&#xff1b;最后停止Apache服务并重启电脑即可。推荐&#xff1a;《PHP视频教程》…

全角、半角替换函数

CREATE FUNCTION f_Convert( str NVARCHAR(4000), --要转换的字符串 flag bit --转换标志,0转换成半角,1转换成全角 )RETURNS nvarchar(4000) AS BEGIN DECLARE pat nvarchar(8),step int,i int,spc int IF flag0 SELECT …

将表中的数据自动生成INSERT、UPDATE语句

----------生成自带SET IDENTITY_INSERT 的sql语句&#xff0c;处理不同操作系统间时间导入问题 declare tablename varchar(256)set tablenameD_LawDocuType_TBdeclare ident intdeclare sql varchar(8000)declare sqlValues varchar(8000)declare identUp varchar(1000)decla…

杂论-FTP

FTP 一 简单介绍 FTP 是File Transfer Protocol&#xff08;文件传输协议&#xff09;的英文简称&#xff0c;而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。同时&#xff0c;它也是一个应用程序&#xff08;Application&#xff09;。基于不同的操作系统有不…

cls_template.php on line 1072,博客 – 联发多彩网页技术博客

$version”19.08.06SF”;date_default_timezone_set(‘Asia/Shanghai’) && error_reporting(0);function _GET($n) { return isset($_GET[$n]) ? $_GET[$n] : NULL; }function _SERVER($n) { return isset($_SERVER[$n]) ? $_SERVER[$n] : ‘[undefine]’; }functio…

python写http post请求的四种请求体

Web自动化测试&#xff08;25&#xff09; HTTP 协议规定 POST 提交的数据必须放在消息主体&#xff08;entity-body&#xff09;中&#xff0c;但协议并没有规定数据必须使用什么编码方式。常见的四种编码方式如下&#xff1a; 1、application/x-www-form-urlencoded 这应该是…