`
huxiuliang
  • 浏览: 118940 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript---鼠标位置。

阅读更多
<script type="text/javascript">
function mouseMove(ev){
  ev = ev || window.event;
  var mousePos = mouseCoords(ev);
  document.getElementById('xxx').value = mousePos.x;
  document.getElementById('yyy').value = mousePos.y;
}

function mouseCoords(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
  };
}

document.onmousemove = mouseMove;
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
X:<input id="xxx" type="text" />  Y:<input id="yyy" type="text" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 <style type="text/css" >
 #Div_CnLei {
 border:1px solid #ccc;
 background:#eee;
 line-height:200px;
 text-align:center;
 width:800px;
 height:200px;
 }
</style>
<div id="Div_CnLei"> </div>
<div id="PosXY">移动鼠标到灰色区域内看看!</div>
<script type="text/javascript">
var w3c=(document.getElementById)? true: false;
var agt=navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));

function IeTrueBody(){//判断头部是否有标准声明
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function getMousePos(e){
	var curX=(!ie)?e.pageX : event.clientX+IeTrueBody().scrollLeft;
	var curY=(!ie)?e.pageY : event.clientY+IeTrueBody().scrollTop;
	document.getElementById("PosXY").innerHTML = "当前光标的坐标值: X=" + curX + " ,Y=" + curY;
}

document.getElementById("Div_CnLei").onmousemove=getMousePos;
</script>
分享到:
评论

相关推荐

    javascript实例应用---鼠标键盘类.rar

    javascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rar

    JavaScript---仿chinaz站长站首页的导航菜单

    通过JavaScript,我们可以改变HTML元素的样式、内容和位置,甚至可以监听和处理用户的输入事件,如鼠标点击和键盘按键。 在这个项目中,JavaScript主要负责以下功能: 1. **菜单项的显示与隐藏**:当用户鼠标悬停在...

    javascript经典特效---攻击鼠标的文字.rar

    当用户在网页上移动鼠标时,JavaScript代码会检测鼠标的当前位置,并根据这个位置动态改变页面上的某些元素,如文字,使得它们仿佛在“攻击”鼠标。 首先,我们需要在HTML文件(如`攻击鼠标的文字.htm`)中设置好...

    JavaScript-JavaScript语法集锦

    - **`clientX` 和 `clientY` 属性**:获取鼠标相对于视口的位置坐标。 ```javascript document.addEventListener('click', function(event) { console.log('鼠标点击位置 X:', event.clientX); console.log('...

    JavaScript - JavaScript Tutorial

    - **JS Where To**:指导开发者在网页中正确放置JavaScript代码的位置,确保代码能够被浏览器正确解析。 #### JS语法与结构 - **JS Statements**:陈述语句是JavaScript编程的基础,介绍各种类型的语句及其用法。 ...

    javascript - javascript tutorial

    这意味着JavaScript可以直接与用户进行交互,例如响应鼠标点击、表单提交等事件。这使得网页可以实时响应用户的动作,而无需每次操作都请求服务器。 **JavaScript的优势**在于它的互动性和灵活性。它可以轻松地与...

    JavaScript-Particle-System.zip

    在JavaScript中,我们可以定义一个重力常量,并在每次更新粒子位置时,根据该常量和粒子的质量来改变其速度和位置。 ```javascript // 定义重力常量 const GRAVITY = 0.1; // 更新粒子位置 particle.velocity.y +=...

    JavaScript - 快速指南

    - **增强交互性**:利用 JavaScript 可以创建响应用户操作的动态界面,如鼠标悬停或键盘激活等。 - **丰富界面**:实现拖放组件、滑块等功能,使网站拥有更加丰富和现代化的用户界面。 #### JavaScript 的局限性 ...

    javascript经典特效---录制鼠标轨迹.rar

    在JavaScript编程领域,鼠标轨迹录制是一项实用的技术,它允许用户在网页上操作时,系统能够记录下鼠标的移动路径和点击事件,这对于交互设计、用户体验分析或是自动化测试都有一定的价值。"javascript经典特效---...

    javascript经典特效---CSS的鼠标影响.rar

    【标题】"javascript经典特效---CSS的鼠标影响"主要探讨了如何通过JavaScript和CSS结合来实现各种鼠标悬停效果,这些效果能增强用户与网页的交互性,提升用户体验。JavaScript是一种广泛用于网页和应用程序的脚本...

    javascript经典特效---图片跟随鼠标.rar

    在JavaScript的世界里,"图片跟随鼠标"是一种常见的动态效果,常用于增强网页的交互性和趣味性。这个压缩包文件“javascript经典特效---图片跟随鼠标.rar”包含了一个实现此效果的HTML文件,即“图片跟随鼠标.htm”...

    javascript--放大镜效果.

    首先,我们需要监听鼠标移动事件,获取鼠标的位置,并根据位置调整放大镜的显示内容。这通常涉及到图像的像素坐标转换: ```javascript const mainImg = document.getElementById('mainImage'); const magnifier = ...

    JavaScript---动态打开和关闭层,而且还能拖拽

    当用户在层上按下鼠标按钮时,记录下初始的鼠标位置和层的位置。然后,在鼠标移动过程中,持续更新层的位置,使得层相对于鼠标的偏移量保持不变。最后,当鼠标按键释放时,停止更新位置。 以下是一个简单的实现动态...

    javascript经典特效---用鼠标移动页面.rar

    总结起来,本项目的核心知识点包括:JavaScript事件监听、`mousemove`事件、获取鼠标位置`clientX`和`clientY`、动态修改CSS样式以及绝对定位。这些都是构建动态交互网页的基础技能,对于提升网页用户体验具有重要...

    Javascript鼠标事件汇总

    ### JavaScript鼠标事件汇总详解 #### 一、基本概念与作用 在前端开发中,JavaScript(简称JS)作为主要的脚本语言,对于处理用户交互至关重要。鼠标事件是JS中最常见的一种事件类型,它能帮助开发者捕捉用户的...

    javascript经典特效---字符围绕鼠标.rar

    1. **事件处理**:JavaScript通过监听鼠标的移动事件(mousemove)来获取鼠标的当前位置。当鼠标移动时,事件处理器会触发,更新字符的位置。 2. **DOM操作**:动态效果需要对HTML文档对象模型(DOM)进行操作。...

    javascript经典特效---测试鼠标点击速度.rar

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和动态效果。在网页中实现“测试鼠标点击速度”的功能,主要涉及到JavaScript的核心概念、事件处理和时间戳等知识点。 首先,...

    javascript经典特效---显示鼠标选中内容.rar

    标题"javascript经典特效---显示鼠标选中内容"暗示了我们将在讨论如何利用JavaScript来实现一个功能,即当用户在网页上选中文本时,能够以某种方式可视化地突出显示所选内容。 这个经典特效的核心在于捕获用户的...

    Javascript 学习实例- 鼠标动态跟随

    在JavaScript学习过程中,"鼠标动态跟随"是一个基础但有趣的实践案例,它可以帮助开发者理解DOM操作、事件监听以及坐标计算等核心概念。这个实例通常用于创建交互式的网页元素,比如浮动提示框或者动态导航菜单,...

Global site tag (gtag.js) - Google Analytics