您的位置：首页 > 其它

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

2017-08-08 17:35 549 查看

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

计算鼠标的页面坐标：

event.pageX

event.pageY

计算父元素的页面坐标：

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

function getElementPosition(elem){
var elemTop = elem.offsetTop;//获得elem元素距相对定位的父元素的top
var 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;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航