search

Home  >  Q&A  >  body text

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

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

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

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

PHPzPHPz2818 days ago695

reply all(3)I'll reply

  • 黄舟

    黄舟2017-04-11 12:53:04

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

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-11 12:53:04

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

    reply
    0
  • ringa_lee

    ringa_lee2017-04-11 12:53:04

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

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

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

    reply
    0
  • Cancelreply