Js和JQuery获取鼠标指针坐标的实现代码分享

 更新时间:2015年05月25日 12:10:18   投稿:junjie   我要评论

这篇文章主要介绍了Js和JQuery获取鼠标指针坐标的实现代码分享,本文直接给出实现的代码,需要的朋友可以参考下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src=""></script>
<title>jquery 获取鼠标指针的坐标</title>
<script>
//普通js函数
function test(event) {
 event = event || window.event;
 var x = event.offsetX || event.layerX;
 var y = event.offsetY || event.layerY;
 alert("x="+x+"; y="+y);
 }
//jquery函数
$(function(){
 $("#t").mouseover(
 function(event){
  event = event || window.event; 
  var x = event.offsetX || event.originalEvent.layerX;
  var y = event.offsetY || event.originalEvent.layerY;
  alert("x:"+x+"; y:"+y);
 }
 );
 });
</script>
</head>
<body>
<div id="t" style="float:left;background-color: green;width: 300px;height: 60px;">测试鼠标位置(jquery函数处理)</div>
<div id="s" onmouseover="test(event)" style="float:left;background-color: red;width: 300px;height: 60px;margin-left:10px;">测试鼠标位置(普通js函数处理)</div>
</body>
</html> 

相关文章

  • 子页向父页传值示例

    子页向父页传值示例

    在某些情况下需要子页向父页传值,本文有个不错的示例,不会的朋友可以参考下
    2013-11-11
  • nuxt中使用路由守卫的方法步骤

    nuxt中使用路由守卫的方法步骤

    这篇文章主要介绍了nuxt中使用路由守卫的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • bootstrap快速制作后台界面

    bootstrap快速制作后台界面

    这篇文章主要为大家详细介绍了如何利用bootstrap快速制作后台界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • CSS+Js遮罩效果的TAB及焦点图片切换(推荐)

    CSS+Js遮罩效果的TAB及焦点图片切换(推荐)

    CSS+Js图片切换技术,类似的已有不少了,这一个使用了遮罩过渡的效果,同样应用到了TAB选项卡上,本页面仅是为了演示,大家用时候把它拆分开来,这个效果也对学习图片效果制作很有帮助。
    2009-11-11
  • JS实现数组深拷贝的方法分析

    JS实现数组深拷贝的方法分析

    这篇文章主要介绍了JS实现数组深拷贝的方法,结合实例形式分析了javascript数组深拷贝的相关原理、实现方法及操作注意事项,需要的朋友可以参考下
    2019-03-03
  • Bootstrap模态框使用详解

    Bootstrap模态框使用详解

    这篇文章主要为大家详细介绍了Bootstrap模态框的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 通过js动态创建标签,并设置属性方法

    通过js动态创建标签,并设置属性方法

    下面小编就为大家分享一篇通过js动态创建标签,并设置属性方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • JS中判断字符串存在和非空的方法

    JS中判断字符串存在和非空的方法

    这篇文章给大家分享了JS中判断字符串存在和非空的方法以及相关注意点总结,有兴趣的朋友们参考下。
    2018-09-09
  • 利用JS判断客户端类型你应该知道的四种方法

    利用JS判断客户端类型你应该知道的四种方法

    这篇文章主要给大家总结介绍了关于利用JS判断客户端类型的四种方法,比如通过通过判断浏览器的userAgent、检查是否是移动端(Mobile)、ipad、iphone、微信、QQ等的方法,需要的朋友可以参考借鉴,下面
    2017-12-12
  • js实现精确到毫秒的倒计时效果

    js实现精确到毫秒的倒计时效果

    这篇文章主要为大家详细介绍了js实现精确到毫秒的倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论