javascript - 网页上提示新版本变化的效果是用什么技术实现

Question

如图，这种网页上提示新版本变化的效果是用什么技术实现的？

备注：遮罩层下面的页面数据是个人真实信息，上面的新版本信息是浮在相关功能的位置上的

有些APP上面也有这样子的效果，如果了解的话，望告知，谢谢。

Answer 1

慕课网上有个 如何实现新手引导效果 的课程，可以去看看。

Answer 2

猜测除了能按的之外应该就是些图片，你可以进f12看看。

Answer 3

新项目开发时用到过这个东西，有两个方案：

• 网页能够等比例缩放的情况下，直接覆盖若干张图片即可，优点是最简单的实现方式，只需要UI给图就行，缺点是点击任何地方都会进入下一步操作(需要避免这个情况可以在特定位置上加一个层级较高的透明的p来响应事件)，如果布局是相对应自适应而不是等比例缩放，无法使用此方法（我的项目就是这个情况）。

• 根据目前元素相对应的位置情况在灰色蒙版上面放置图片，可以利用代码获取元素的位置和相对于视口的位置，能够计算出图片的摆放位置。优点在于可以明确某部分响应点击事件，缺点在于需要开发一个通用组件来根据元素位置摆放相应图片，有一定开发量~