引导图实现思路

引导图是为了方便用户快速的了解产品的新功能，比较好的开源项目有driverJS、introJS。了解实现思路能更好的扩展第三方应用，特别是对于这种DOM操作相关的库。

<!DOCTYPE html>
<html lang="en">
<head>
  
  <title>Document</title>
</head>
<body>
  <style>
  body {
    position: relative;
    padding: 0;
    margin: 0;
  }
  .mask {
    position: absolute;
    top: 0;
    height: 0;
    background: rgba(0, 0 ,0 ,0.7);
    width: 600px;
    height: 600px;
    z-index: 1;
  }

  .pop {
    width: 80px;
    height: 80px;
    z-index: 2;
    position: absolute;
    background: #fff;
    top: 0;
  }

  .my {
    width: 50px;
    height: 50px;
    background: yellow;
  }
  
  /* 添加一个class把元素透出来*/
  .driver {
    position: relative;
    z-index: 3;
  }
</style>
<div>
  <div class="my driver">
    haha
  </div>
</div>

<!-- 一定要挂载到body下 -->
<div class="mask"></div>

<!-- 覆盖物 -->
<div class="pop"></div>

</body>
</html>

思路：这个简单的DMEO没有JS，my类是等待引导的元素，pop是一个高亮区，用于突出显示my，mask是遮罩层。在使用z-index时，有几点要注意：

  1. z-index要想生效，必须对元素使用定位（非static）
  2. 如果父级元素设置了z-index，那么无论子级z-index多大，都无法穿透父级

综合以上，mask设置绝对定位并且z-index最小，pop设置绝对定位z-index次之，高亮元素设置relative定位并且z-index最高，这样就可以突出显示引导元素，进而实现引导效果。

在实际开发中，元素的位置和大小都需要通过JS动态计算，并添加元素上

posted @ 2021-09-30 14:02  wmui  阅读(200)  评论(0)  编辑  收藏  举报