引导图实现思路

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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 @ 2019-05-31 15:04:46 浏览(87) CSS笔记

avatar