层级元素含有position属性时鼠标坐标位置解决方案

分类栏目:用户体验 - 前端开发

9415

发布于 3 条评论

在上一篇文章中《利用CSS sprites制作随着鼠标移动的动画背景》我们是用mousemove事件来实现我们的鼠标坐标定位判断的。mousemove这个鼠标函数,常常会用到我们的项目中,是个很好用的函数。根据在上一篇文章制作实例的时候遇到的一些问题,作个总结出来,一来分享给大家,二来可以给自己加深印象。相信熟悉javascript的朋友对鼠标坐标函数比较了解的,网上的资料也很多,就不多说了。先看看一段代码:

jQuery(document).ready(function(){
   $('#demos').mousemove(function(e){
	   var relX = e.pageX - this.offsetLeft
	   var relY = e.pageY - this.offsetTop
       $('#demos').html(relX + ', ' + relY);

   });

这段代码表示的是,鼠标在#demos对象中的相对坐标值,也就是以这个对象为基准(范围),计算鼠标在对象内(对象的左上方的顶角坐标为:0,0)的坐标值。我们继续看看具体的代码含义,e.pageXe.pageY这两个表示了鼠标在页面上的位置;offsetLeftoffsetTop分别表示的是返回对象相对于父级对象的布局或坐标的left值和top值。明白了这几个代码含义,上面的示例代码最终输出值也不难理解。

在这里附上一张关于盒模型的各种计算值含义详解图:

Mouse-coordinates-position

层级元素含有position属性

在这里我们要重点说下offsetLeft的计算方法,上面也说到是对象相对于父级对象的布局或坐标的left值,那么父级对象将是影响最终值的关键。一般情况下,都没什么问题,但如果父级对象出现了position属性,并且定义了margin值,那么计算结果将会不如我们所意。这是个特殊情况,在这时我们需要适当的修改上面的示例代码,具体如下:

jQuery(document).ready(function(){
   $('#demos').mousemove(function(e){
	   var parentOffset = $(this).parent().offset(); 
	   var relX = e.pageX - parentOffset.left;
	   var relY = e.pageY - parentOffset.top;
       $('#demos').html(relX + ', ' + relY);

   }); 
})

总结到此结束,解决方案折腾了好久……好好学习,天天向上。Good luck!

全部评论 / 3

  1. 新手看起来有点费劲 但是真心感觉不错

    前端爱好者 2013-01-10
    3
  2. 123iodi欧迪芬

    ocean 2013-01-10
    2
  3. 不错,有些专有名词可能初学者不太懂

    1