最近在工作中要去做一个类似于一些软件游戏里面的引导的效果。

其实这个最大的难度就是在前端真正意义上实现这个穿透效果。毕竟我们没有能力在一个元素上挖个洞不是吗。

我给大家我的实现思路,你看到那块纯透明的东西呢,其实他是整个盒子的content区域,外面的遮罩层其实是这个盒子的Border区域,你需要动态的计算撑满整个页面改元素的Border-top/left/right需要多高。底部可以不用计算,给一个很大的值,然后外围容器用overflow去切就OK。

我这里给出我的计算方式,你不一定适用,可以用来参考。

initArea () {
      // offsetTop基于最近的外层元素 面对复杂包裹的情况会有问题
      // 所以用getClientRects这组API结合根文档进行组合计算
      window.dom = this.dom
      const {top, left, width, height, right} = this.dom.getClientRects()[0]
      const htmlTop = document.documentElement.getClientRects()[0].top
      const htmlRight = document.documentElement.getClientRects()[0].right
      this.guideTop = 0
      this.guideLeft = 0
      this.guideWidth = width - 10
      this.guideHeight = height - 10
      this.guideBorderTopWidth = Math.abs(htmlTop) + top - 5
      // 下边框根据上面的信息无法计算 所以直接给一个很大的值 让包裹层去腰斩
      this.guideBorderBotWidth = 10000
      this.guideBorderLeftWidth = left - 5
      this.guideBorderRightWidth = Math.abs(htmlRight) - right - 5
    },

整篇文章比较简短,不过我相信如果你需要实现这个效果的话,应该很快就能理解其原理