pageX、pageY及父元素的页面坐标使提示框跟随鼠标移动

来源：互联网发布：cbox网络电视去广告版编辑：程序博客网时间：2024/05/18 00:03

提示框相对父元素的定位，要计算提示框的left和top属性。所以公式应该为提示框的相对坐标=鼠标的页面坐标-父元素的页面坐标

计算鼠标的页面坐标：

event.pageX

event.pageY

计算父元素的页面坐标：

首先写一个js获取元素到页面顶部和左部距离的方法

function getElementPosition(elem){var elemTop = elem.offsetTop;//获得elem元素距相对定位的父元素的topvar elemLeft = elem.offsetLeft;elem = elem.offsetParent;//将elem换成起相对定位的父元素while(elem!=null){//只要还有相对定位的父元素elemTop +=elem.offsetTop;//获得父元素 距他父元素的top值,累加到结果中elemLeft += elem.offsetLeft;elem = elem.offsetParent;//再次将elem换成他相对定位的父元素上;}return {elemTop: elemTop,elemLeft: elemLeft};}

参考： js中获取页面任意元素距页面顶部的总距离

参考：阮一峰的博客用Javascript获取页面元素的位置

//获取父元素的页面坐标var parentPosition =  getElementPosition(document.getElementById("funnel-chart-canvas"));for(i=0;i<len-1;i++){   (function(i){   document.getElementById(rateId[i]).onmouseover = function(evt){       $('#tip').empty();   if(tureRate[i]>yzRate[i])   tipContent = '状态：正常<br>流程完成率实际值：'+toPercent(tureRate[i])+'%<br>流程完成率指导值：'+toPercent(yzRate[i])+'%';   else   tipContent = '状态：<span style="color:red;font-size:14px;">异常</span><br>流程完成率实际值：'+toPercent(tureRate[i])+'%<br>流程完成率指导值：'+toPercent(yzRate[i])+'%';   $('#tip').append(tipContent);   $('#tip').css("display","block");     }     }(i));   document.getElementById(rateId[i]).onmousemove = function(evt){    var pageX = event.pageX;    var pageY = event.pageY;    if(pageX === undefined){         pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);    }        if(pageY === undefined){         pageY = event.clientY +(document.body.scrollTop || document.documentElement.scrollTop);    }   $('#tip').css({           'top' : (pageY-parentPosition.elemTop+15) + 'px',                           'left': (pageX-parentPosition.elemLeft+15)+ 'px'       });   }   document.getElementById(rateId[i]).onmouseout = function(evt){   $('#tip').hide();   }      }

当父元素就是body,即父元素的距离页面顶部和页面左部的距离为0时，可以不用减去父元素的页面坐标，即使用以下代码

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery鼠标经过淡入显示提示框 演示</title><script type="text/JavaScript" src="../js/jquery-1.7.2.min.js"></script><style type="text/css">.div{ border:1px solid #0000FF; float:left; width:200px; height:200px; margin:10px;}div#tip{ position:absolute; width:100px; height:auto; border:1px solid #00CC66;}.div1{border:0;cursor:pointer;width:auto; height:auto;}</style></head><body><div id="tip" style="display:none">提示内容</div><div class="div"></div><div class="div"></div><div class="div div1">enenba</div><script type="text/javascript"> $(document).ready(function(){  $('.div').hover(   function(){    $('#tip').fadeIn('slow');   }  );    $('.div').mousemove(function(e){   var top = e.pageY+5;   var left = e.pageX+5;   $('#tip').css({    'top' : top + 'px',    'left': left+ 'px'   });  });    $('.div').mouseout(function(){   $('#tip').hide();  });   });</script></body></html>

参考jquery 鼠标停留显示提示框，提示框位置跟随鼠标移动

当父元素的父元素即为body时，可以直接使用父元素的scrollTop作为父元素的页面坐标，可以参考如下代码
javascript 跟随鼠标移动的提示框的一个小demo

js获取一个元素到页面顶部和左部的距离

var getPos=function(o){//取元素坐标    var x = 0, y = 0;    do{        x += o.offsetLeft;        y += o.offsetTop;    }while(o=o.offsetParent);    return {'x':x,'y':y};}

jquery 获取一个元素到页面顶部的距离

var X = $('#DivID').offset().top;

阅读全文

0 0