本文实例为大家分享了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;
    iatext.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>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！