脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js使用onmousemove和onmouseout获取鼠标坐标

js使用onmousemove和onmouseout获取鼠标坐标的方法

 更新时间：2015年03月31日 15:13:09   作者：欧阳不疯  
这篇文章主要介绍了js使用onmousemove和onmouseout获取鼠标坐标的方法,涉及javascript操作鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法。分享给大家供大家参考。具体如下：

下面的js代码演示了onmousemove和onmouseout事件的用法，鼠标在指定区域内移动时会动态显示鼠标坐标信息

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e)
{
x=e.clientX;
y=e.clientY;
coor="Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML=coor
}
function clearCoor()
{
document.getElementById("demo").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<div id="coordiv" style="width:199px;height:99px;border:1px solid" 
onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<p>Mouse over the rectangle above, 
and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Javascript中的every()与some()的区别和应用小结

    Javascript中的every()与some()的区别和应用小结

    every跟some不同点在于，every要判断数组中是否每个元素都满足条件，只有都满足条件才返回true，只要有一个不满足就返回false，这篇文章主要介绍了Javascript中的every()与some()的区别和应用,需要的朋友可以参考下
    2023-05-05
  • bootstrap fileinput插件实现预览上传照片功能

    bootstrap fileinput插件实现预览上传照片功能

    这篇文章主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-01-01
  • javascript五图轮播切换实用版

    javascript五图轮播切换实用版

    今天发表一个自己刚学js的练习，javascript五图轮播切换---实用版，这个实力有个缺陷就是没有过渡效果，这个本人也还在研究中，也希望高手可以指点一下
    2012-08-08
  • 浅谈js中的in-for循环

    浅谈js中的in-for循环

    下面小编就为大家带来一篇浅谈js中的in-for循环。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • AJAX请求与跨域问题解决方法详解

    AJAX请求与跨域问题解决方法详解

    学习ajax必须得掌握的就是跨域请求,实际上在不同源的地址上发送请求就是跨域请求,本文主要给大家介绍了关于AJAX请求以及解决跨域问题的相关资料,需要的朋友可以参考下
    2022-11-11
  • js实现文本框支持加减运算的方法

    js实现文本框支持加减运算的方法

    这篇文章主要介绍了js实现文本框支持加减运算的方法,可实现文本框输入加减运算式同时右侧实时显示对应计算结果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • layDate日期控件使用方法详解

    layDate日期控件使用方法详解

    这篇文章主要为大家详细介绍了layDate日期控件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Js+Ajax,Get和Post在使用上的区别小结

    Js+Ajax,Get和Post在使用上的区别小结

    下面小编就为大家带来一篇Js+Ajax,Get和Post在使用上的区别小结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • ie和firefox不兼容的解决方法集合

    ie和firefox不兼容的解决方法集合

    网页设计很多情况下，需要注意ie跟firefox的不同区别，脚本之家提供了不好这样的文章，大家可以好好看下。
    2009-04-04
  • javascript改变position值实现菜单滚动至顶部后固定

    javascript改变position值实现菜单滚动至顶部后固定

    现在很多网站都有这样的一个效果，当页面滚动到一定高度时，菜单栏会固定在页面顶部;该效果在 ie6 下不支持，因为ie6不支持 position:fixed,效果很不错，感兴趣的朋友可以了解下啊
    2013-01-01

最新评论