(十一)原生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";
        }
      }

原文地址：https://blog.csdn.net/qq_27702739/article/details/140569125

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！