js鼠标悬浮框效果

时间:2022-05-28 等待的L先生人气:0
<!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>
加载全部内容