这篇文章主要介绍了js如何实现鼠标悬浮框效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体内容如下<!DOCTYPE html><html&n
这篇文章主要介绍了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>感谢你能够认真阅读完这篇文章，希望小编分享的“js如何实现鼠标悬浮框效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!
--结束END--
本文标题: js如何实现鼠标悬浮框效果
本文链接: https://www.lsjlt.com/news/326077.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
2024-05-09
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0