(十一)原生js案例之仿qq展示好友信息

原生js仿QQ里面的，鼠标移动到好友名称上，右边显示好友简介面板的功能，可以去丰富下细节

实现效果

代码实现

• 必要的css

*{
      margin: 0;
      padding: 0;
     }
     .box{
      width: 800px;
      margin: 60px auto;
      position: relative;
     }
     #qq{
      width: 400px;
      height: 715px;
      background: #E0C3FC;
      cursor: pointer;
      background-image: url(./images/qq.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% auto;
     }
     #title{
      width: 200px;
      height: 200px;
      background: #8EC5FC;
      position: absolute;
      top: 0;
      left: 410px;
      display: none;
      cursor: pointer;
     }

• 静态页面、

 <div class="box">
       <div id="qq">

       </div>
       <div id="title"></div>
   </div>

• 逻辑代码

	window.onload = function(){
        oBox = document.querySelector(".box");
        oQQ = document.querySelector("#qq");
        oTitle = document.querySelector("#title");
        let timer = null
        oQQ.onmouseover = function(){
          clearTimeout(timer);
          show()
        }
        oQQ.onmouseout = function(){
          timer = setTimeout(hide, 2000);
        }
        oTitle.onmouseover = function(){
          //关闭定时器
          clearTimeout(timer);
        }
        // 鼠标移出盒子
        oTitle.onmouseout = function(){
          timer = setTimeout(hide, 2000);
        }

        function show(){
          oTitle.style.display = "block";
        }
        function hide(){
          oTitle.style.display = "none";
        }
      }