JavaScript onmousemove 事件
当我鼠标移入一个控件A上面时候会触发onmousemove事件当我用鼠标在A控件左右移动但不出A控件的范围我怎么才能知道我鼠标的位置距离A控件左边距的距离是多少呢?谢谢有...
当我鼠标移入一个控件A上面时候 会触发onmousemove 事件 当我用鼠标在A控件左右移动 但不出A控件的范围 我怎么才能知道 我鼠标的位置距离A控件左边距的距离是多少呢? 谢谢 有类似的东西也请指教一下~
展开
4个回答
展开全部
定义和用法
onmousemove 事件会在鼠标指针移动时发生。
语法
onmousemove="SomeJavaScriptCode"
参数描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。
支持该事件的 HTML 标签:
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象:
onmousemove is, by default, not an event of any object,
because mouse movement happens very frequently.
提示和注释
注释:每当用户把鼠标移动一个像素,就会发生一个 mousemove 事件。这会耗费系统资源去处理所有这些 mousemove 事件。因此请审慎地使用该事件。
实例:
下面的例子中,当用户把鼠标移动到图像上时,将显示一个对话框:
<img src="/i/eg_mouse2.jpg" alt="mouse"
onmousemove="alert('您的鼠标刚才经过了图片!')" />
2013-07-12
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<BODY onMouseMove='showMouseXY()'>
<div>
<input id='haha' type='button' value='此时鼠标坐标横坐标:'><br>
<input id='hahahaha' type='button' value='图片左边的坐标:'><br>
<input id='hahahahaha' type='button' value='此时鼠标离图片左边坐标:'><br>
</div>
<image id='img_1' src='lovely.jpg' onClick='showBigImage(this)' style="position:absolute;background-color:red;left:200px;top:200px;zIndex:8"></image>
</BODY>
</HTML>
<script>
function showMouseXY(){
document.getElementById("haha").value="此时鼠标坐标横坐标:"+ event.screenX;
document.getElementById("hahahahaha").value="此时鼠标离图片左边坐标:"+( parseInt(event.screenX) - parseInt(document.getElementById("img_1").style.left));
document.getElementById("hahahaha").value="图片左边的坐标:"+ document.getElementById("img_1").style.left;
}
</script> 这个方法也很牵强,希望能解决你的问题~
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<BODY onMouseMove='showMouseXY()'>
<div>
<input id='haha' type='button' value='此时鼠标坐标横坐标:'><br>
<input id='hahahaha' type='button' value='图片左边的坐标:'><br>
<input id='hahahahaha' type='button' value='此时鼠标离图片左边坐标:'><br>
</div>
<image id='img_1' src='lovely.jpg' onClick='showBigImage(this)' style="position:absolute;background-color:red;left:200px;top:200px;zIndex:8"></image>
</BODY>
</HTML>
<script>
function showMouseXY(){
document.getElementById("haha").value="此时鼠标坐标横坐标:"+ event.screenX;
document.getElementById("hahahahaha").value="此时鼠标离图片左边坐标:"+( parseInt(event.screenX) - parseInt(document.getElementById("img_1").style.left));
document.getElementById("hahahaha").value="图片左边的坐标:"+ document.getElementById("img_1").style.left;
}
</script> 这个方法也很牵强,希望能解决你的问题~
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-07-12
展开全部
event.offsetXevent.offsetY
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-07-12
展开全部
必须确定坐标系(0,0)从哪开始?并且知道控件A离X轴、Y轴距离。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询