<!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" />
<title>无标题文档</title>
</head>
<body>
<script>
function mouseMove(ev)
{
ev= ev || window.event;
var mousePos = mouseCoords(ev);
//alert(ev.pageX);
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>
Mouse X Position:
<input id=xxx type=text>
<br>Mouse Y Position:
<input id=yyy type=text>
<input type="button" name="button1" value="按钮1" onclick=""/>
<input type="button" name="button2" value="按钮2"/>
</body>
分享到:
相关推荐
"HTML5 Canvas眼睛跟随鼠标特效"是一个利用Canvas API实现的有趣互动效果,用户移动鼠标时,页面上的虚拟眼睛会随之改变方向,仿佛在盯着鼠标移动。 在实现这个特效时,首先我们需要理解Canvas的基本结构。...
当鼠标在页面上移动时,程序会检测到这些事件,并根据鼠标的当前位置生成或更新泡沫图形。这通常涉及到计算每个泡沫的位置、大小、透明度等属性,以模拟出泡沫随着鼠标移动而悬浮的效果。 在压缩包内的“jiaoben...
4. **监听鼠标移动**:在`onMouseMove`事件中,获取鼠标的当前位置,并根据预设的算法在新位置创建或复制图案。 5. **处理图案重叠**:当鼠标停止移动时,图案不再产生,但已有的图案会继续堆积。可以通过设置清除...
2. **数据记录**:在事件处理函数中,我们需要获取鼠标的当前位置(`event.clientX`和`event.clientY`)以及时间戳(`new Date().getTime()`),并将它们存储起来。 ```javascript var trackData = []; function ...
例如,`mousemove`事件可以检测到鼠标的移动,让我们能根据鼠标的当前位置调整页面上的元素或动画。结合CSS3的变换(transform)和过渡(transition)属性,我们可以实现鼠标悬停时元素的平滑移动、旋转、缩放等效果...
在这个特效中,我们需要监听`mousemove`事件,当鼠标在页面上移动时,事件处理器会被触发。代码可能会这样写: ```javascript $(document).on('mousemove', function(event) { // 在这里处理鼠标移动的逻辑 }); ``...
4. **CSS样式**:为时钟元素添加CSS样式,使其在页面上浮动并跟随鼠标移动,通常会设置其定位为绝对或固定,以及根据鼠标位置更新其top和left属性。 5. **性能优化**:为了避免过度渲染,可以设置一个定时器(如`...
HTML5 Canvas是一个强大的图形绘制工具,它允许网页开发者在页面上直接进行动态图像处理和交互式设计。这个“HTML5 Canvas鼠标绘制线条特效”利用了Canvas API,通过JavaScript实现了一个独特的效果,即当用户移动...
首先,"JS特效-鼠标特效"这一标签暗示了我们将在HTML文档中使用JavaScript来实现某种动态效果,即当鼠标在页面上移动时,实时显示鼠标的当前位置。JavaScript是一种强大的客户端脚本语言,它允许我们在用户与网页...
HTML鼠标跟随特效是一种常见的网页交互设计,用于提升用户体验和页面的视觉吸引力。这种特效使得页面元素根据用户的鼠标移动而动态变化,创造出一种互动的视觉效果。以下是对这个主题的详细阐述: 1. HTML...
可以监听鼠标的`mousemove`事件,每当鼠标移动时,获取鼠标的当前坐标(`event.clientX` 和 `event.clientY`),然后更新CSS中的`top`和`left`值,使文字元素移动到鼠标的位置。 4. **动画平滑性**:为了提供更好的...
当鼠标移动时,`event.pageX`和`event.pageY`可以获取到鼠标的页面坐标。这些坐标值会被用来更新小球的位置,确保小球始终跟随鼠标移动。 最后,我们有一个包含`div`元素的HTML片段,它设置了背景颜色、边框等样式...
在JavaScript编程领域中,"状态栏显示鼠标坐标"是一个常见的特效,它允许用户在浏览器的状态栏看到鼠标指针当前位置的坐标值。这个效果通常通过监听鼠标的移动事件并实时更新状态栏来实现,是一个很好的实践...
当鼠标移动时,事件对象会携带当前鼠标的坐标信息,可以使用`event.clientX`和`event.clientY`来获取。 接下来,我们可以通过改变容器元素的CSS样式来模拟闪电效果。一种常见的方法是使用渐变背景,通过改变背景...
根据提供的信息,我们可以深入探讨与“文本框取鼠标事件”相关的知识点。这主要涉及Web开发中的HTML和JavaScript技术,特别是如何在网页上处理文本框的鼠标事件。 ### 文本框与鼠标事件概述 #### 1. **文本框(Text...
// 获取当前页面元素的位置,以便获得相对于文档的完整坐标 var bodyRect = document.body.getBoundingClientRect(); var elemRect = document.getElementById('coords').getBoundingClientRect(); // 计算出相...
HTML鼠标跟随移动是一种常见的网页交互效果,用户在页面上移动鼠标时,某个元素会跟随鼠标的移动轨迹进行相应的位移。这种效果可以增加用户的互动体验,常见于游戏、设计展示或者个性化网页中。本示例将围绕“html...
通过在HTML元素上绑定`mousemove`事件,我们可以获取鼠标的当前位置,然后改变元素的位置来达到跟随鼠标移动的效果。 ```html <!DOCTYPE html> <html lang="zh"> 鼠标移动页面效果 ; width: 50px; height: ...