本文实例为大家分享了js实现鼠标悬浮框效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <h
本文实例为大家分享了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;
}
</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>--结束END--
本文标题: js实现鼠标悬浮框效果
本文链接: https://www.lsjlt.com/news/144560.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0