<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实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rar
通过JavaScript,我们可以改变HTML元素的样式、内容和位置,甚至可以监听和处理用户的输入事件,如鼠标点击和键盘按键。 在这个项目中,JavaScript主要负责以下功能: 1. **菜单项的显示与隐藏**:当用户鼠标悬停在...
当用户在网页上移动鼠标时,JavaScript代码会检测鼠标的当前位置,并根据这个位置动态改变页面上的某些元素,如文字,使得它们仿佛在“攻击”鼠标。 首先,我们需要在HTML文件(如`攻击鼠标的文字.htm`)中设置好...
- **`clientX` 和 `clientY` 属性**:获取鼠标相对于视口的位置坐标。 ```javascript document.addEventListener('click', function(event) { console.log('鼠标点击位置 X:', event.clientX); console.log('...
- **JS Where To**:指导开发者在网页中正确放置JavaScript代码的位置,确保代码能够被浏览器正确解析。 #### JS语法与结构 - **JS Statements**:陈述语句是JavaScript编程的基础,介绍各种类型的语句及其用法。 ...
这意味着JavaScript可以直接与用户进行交互,例如响应鼠标点击、表单提交等事件。这使得网页可以实时响应用户的动作,而无需每次操作都请求服务器。 **JavaScript的优势**在于它的互动性和灵活性。它可以轻松地与...
在JavaScript中,我们可以定义一个重力常量,并在每次更新粒子位置时,根据该常量和粒子的质量来改变其速度和位置。 ```javascript // 定义重力常量 const GRAVITY = 0.1; // 更新粒子位置 particle.velocity.y +=...
- **增强交互性**:利用 JavaScript 可以创建响应用户操作的动态界面,如鼠标悬停或键盘激活等。 - **丰富界面**:实现拖放组件、滑块等功能,使网站拥有更加丰富和现代化的用户界面。 #### JavaScript 的局限性 ...
在JavaScript编程领域,鼠标轨迹录制是一项实用的技术,它允许用户在网页上操作时,系统能够记录下鼠标的移动路径和点击事件,这对于交互设计、用户体验分析或是自动化测试都有一定的价值。"javascript经典特效---...
【标题】"javascript经典特效---CSS的鼠标影响"主要探讨了如何通过JavaScript和CSS结合来实现各种鼠标悬停效果,这些效果能增强用户与网页的交互性,提升用户体验。JavaScript是一种广泛用于网页和应用程序的脚本...
在JavaScript的世界里,"图片跟随鼠标"是一种常见的动态效果,常用于增强网页的交互性和趣味性。这个压缩包文件“javascript经典特效---图片跟随鼠标.rar”包含了一个实现此效果的HTML文件,即“图片跟随鼠标.htm”...
首先,我们需要监听鼠标移动事件,获取鼠标的位置,并根据位置调整放大镜的显示内容。这通常涉及到图像的像素坐标转换: ```javascript const mainImg = document.getElementById('mainImage'); const magnifier = ...
当用户在层上按下鼠标按钮时,记录下初始的鼠标位置和层的位置。然后,在鼠标移动过程中,持续更新层的位置,使得层相对于鼠标的偏移量保持不变。最后,当鼠标按键释放时,停止更新位置。 以下是一个简单的实现动态...
总结起来,本项目的核心知识点包括:JavaScript事件监听、`mousemove`事件、获取鼠标位置`clientX`和`clientY`、动态修改CSS样式以及绝对定位。这些都是构建动态交互网页的基础技能,对于提升网页用户体验具有重要...
### JavaScript鼠标事件汇总详解 #### 一、基本概念与作用 在前端开发中,JavaScript(简称JS)作为主要的脚本语言,对于处理用户交互至关重要。鼠标事件是JS中最常见的一种事件类型,它能帮助开发者捕捉用户的...
1. **事件处理**:JavaScript通过监听鼠标的移动事件(mousemove)来获取鼠标的当前位置。当鼠标移动时,事件处理器会触发,更新字符的位置。 2. **DOM操作**:动态效果需要对HTML文档对象模型(DOM)进行操作。...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和动态效果。在网页中实现“测试鼠标点击速度”的功能,主要涉及到JavaScript的核心概念、事件处理和时间戳等知识点。 首先,...
标题"javascript经典特效---显示鼠标选中内容"暗示了我们将在讨论如何利用JavaScript来实现一个功能,即当用户在网页上选中文本时,能够以某种方式可视化地突出显示所选内容。 这个经典特效的核心在于捕获用户的...
在JavaScript学习过程中,"鼠标动态跟随"是一个基础但有趣的实践案例,它可以帮助开发者理解DOM操作、事件监听以及坐标计算等核心概念。这个实例通常用于创建交互式的网页元素,比如浮动提示框或者动态导航菜单,...