这篇文章主要介绍了js如何实现鼠标悬浮框效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 500px;
min-height: 400px;
_height:400px;
margin: 200px auto;
background-color: #ccc;
margin-top: 20px;
position: relative;
}
.follwDiv{
width: 200px;
height: 100px;
background-color: #d64e4e;
color: black;
border: solid 1px #9c2c2c;
}
.text{
display: inline;
width: auto;
height: 50px;
line-height: 50px;
text-align: center;
/* border: solid 1px red; */
}
</style>
</head>
<body>
<pre>
跟随鼠标的提示框
</pre>
<div id="box">
<div class="text1 text">中国嫦娥飞天的感想</div><br>
<div class="text2 text" >中国是世界上最大的人口大国！</div>
<div class="follwDiv"></div>
</div>
<script>
var ores=document.getElementsByClassName("follwDiv")[0];
// console.log(ores);
ores.style.display="none";
ores.style.position="absolute";
var aText=document.getElementsByClassName("text");
for(var i=0;i<aText.length;i++){
var index;
// aText[i].setAttribute("index",i); 这种直接在网页上显示出HTML的属性
aText[i].index=i;
aText[i].onmousemove=function(){
if(this.index===0){
ores.innerHTML= "2013年12月14号，嫦娥3号卫星登上了月球，激动人心的时刻终于要到来了 ....";
}
if(this.index===1){
ores.innerHTML="中国有13亿人口,是世界上最打的人口国家，也是世界上历史四大古国之一.....";
}
var s= getMouseCoord();
ores.style.left=s.X+"px";
ores.style.top=5+s.Y+"px";
ores.style.display="block";
}
aText[i].onmouseout=function(){
ores.style.display="none";
}
}
//获得鼠标对象的坐标
function getMouseCoord(even){
//处理兼容： 事件对象
e=even||window.event;
var X= e.offsetX;//相对父元素
var Y=e.offsetY;
var screenX=e.clientX;//当前可视区域
var screenY=e.clientY;
var pageX=e.pageX;//整个页面
var pageY=e.pageY;
return {
X,
Y,
screenX,
screenY,
pageX,
pageY
}
}
</script>
</body>
</html>感谢你能够认真阅读完这篇文章，希望小编分享的“js如何实现鼠标悬浮框效果”这篇文章对大家有帮助，同时也希望大家多多支持天达云，关注天达云行业资讯频道，更多相关知识等着你来学习!