`

通过JS得到当前焦点的坐标

    博客分类:
  • JS
js 
阅读更多

如下是得到当前焦点的坐标:

<!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="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
<title>获取鼠标坐标</title>

</head>

<body>
<script type="text/javascript">
function mousePosition(ev){
     if(ev.pageX || ev.pageY){
      return {x:ev.pageX, y:ev.pageY};
      }
      return {
       x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
       y:ev.clientY + document.body.scrollTop  - document.body.clientTop
       };
 }

function mouseMove(ev){
    ev = ev || window.event;
    var mousePos = mousePosition(ev);
    document.getElementById('xxx').value = mousePos.x;
  document.getElementById('yyy').value = mousePos.y;
}

document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" />  Y:<input id="yyy" type="text" />
</body>
</html>
 
分享到:
评论

相关推荐

    js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性

    通过JS得到当前焦点的坐标 如下是得到当前焦点的坐标: 代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; &lt;...

    js腾讯地图api获取坐标位置.zip

    【JS腾讯地图API获取坐标位置】是利用JavaScript编程语言与腾讯地图API进行交互,实现获取用户当前位置的功能。在Web开发中,这样的功能常用于提供基于地理位置的服务,如导航、附近搜索等。以下将详细介绍相关知识...

    js + CSS 些的焦点图,网页图片滑动很好用

    【标题】中的“js + CSS 些的焦点图”指的是使用JavaScript和CSS技术实现的一种网页交互效果,通常称为“焦点图轮播”。焦点图轮播是网页设计中常见的一种元素,用于展示一组图片或内容,用户可以点击或自动滑动在...

    js 上下左右键控制焦点(示例代码)

    4. 控制焦点移动的函数逻辑:在setpostion函数中,根据触发方向键事件的类型(上下左右),对变量x和y进行操作,来改变焦点的当前位置。这里通过判断条件来实现边界限制,使得焦点不能移出预定的区域。 5. 实现焦点...

    jquery苹果IOS滑块banner焦点图特效

    **jQuery 苹果iOS风格滑块Banner焦点图特效** 在网页设计中,滑块和焦点图是常见的元素,用于展示多张图片或信息,同时节省页面空间。这种效果尤其适用于移动设备,因为它们能提供良好的用户体验,使得用户可以轻松...

    JS实现Excel功能

    本项目旨在通过纯JS来模拟Excel的核心操作,包括焦点移动和单元格输入,为网页应用提供类似电子表格的功能。下面我们将深入探讨这些关键知识点。 首先,我们关注的是"仿照Excel焦点移动功能"。在Excel中,用户可以...

    常用js脚本收集javascript

    通过调用`cc()`函数,可以在输入框获得焦点时自动将光标定位到最后一个字符之后,提高了用户体验。 ### 知识点15:获取前一页面的URL ```javascript document.referrer ``` 通过读取`document.referrer`属性,可以...

    js模拟cad焦点光标特效特效代码

    在JavaScript编程领域,模拟CAD(计算机辅助设计)焦点光标特效是一种常见的技术需求,它能够为用户带来更直观、更具沉浸感的交互体验。本文将深入探讨如何利用JS实现这样的特效,以及涉及到的相关知识点。 首先,...

    javaScript

    JavaScript可以直接在HTML中通过`&lt;script&gt;`标签进行嵌入,或者通过外部`.js`文件引用。 在JavaScript中,`window`对象是全局对象,它代表了浏览器的整个窗口,包括页面内容、工具栏、菜单等。`window`对象拥有许多...

    js弹出一个超酷的小窗口

    标题“JS弹出一个超酷的小窗口”明确指出本篇将探讨如何利用JavaScript(简称JS)来创建一个具有视觉吸引力的弹出窗口。在现代网页设计中,弹出窗口常用于展示额外信息、广告或用户交互提示等场景,而使用JS可以使...

    40种网站常用Javascript技巧

    当文本框获得焦点时,自动将光标移动到最后: ```javascript &lt;script language="javascript"&gt; function cc() { var e = event.srcElement; var r = e.createTextRange(); r.moveStart("character", e.value....

    JS焦点图切换,上下翻转

    JavaScript焦点图切换是一种常见的网页交互效果,用于展示一组图片或内容,通过自动或手动切换来突出显示不同的元素。在这个上下翻转的焦点图切换实例中,我们主要涉及到以下几个知识点: 1. **HTML 结构**: ...

    js中常用的55个经典技巧

    - 当文本框获得焦点时,使用`createTextRange()`方法来选中其中的所有文本,方便用户操作。 ### 11. 获取页面来源 - 使用`document.referrer`属性来获取用户是从哪个页面进入当前页面的。 ### 12. 控制窗口大小 ...

    JavaScript弹出新窗口并控制窗口移动到指定位置的方法

    2. 弹出窗口内容的编写:通过window.open()得到的新窗口对象(本例中为myWindow)可以像操作常规的window对象一样对其进行操作。例如,可以使用document.write()方法在新弹出的窗口中直接写入HTML内容。在代码中,...

    JS图片集鼠标放上去局部放大特效

    总结来说,“JS图片集鼠标放上去局部放大特效”是一种通过JavaScript和CSS实现的交互效果,它提升了用户的浏览体验,让用户能更直观地查看图片的细节。在实际开发中,我们可以根据项目需求进行定制,比如调整放大...

    JS之WINDOW对象

    JavaScript中的WINDOW对象是JavaScript在浏览器环境中访问和操作浏览器窗口的核心对象。它包含了与浏览器窗口相关的所有属性和方法,使得开发者能够实现对窗口的各种控制,如打开新的窗口、更改窗口尺寸、滚动内容...

Global site tag (gtag.js) - Google Analytics