如图,这种网页上提示新版本变化的效果是用什么技术实现的?
备注:遮罩层下面的页面数据是个人真实信息,上面的新版本信息是浮在相关功能的位置上的
有些APP上面也有这样子的效果,如果了解的话,望告知,谢谢。
ringa_lee2017-04-11 12:53:04
新项目开发时用到过这个东西,有两个方案:
网页能够等比例缩放的情况下,直接覆盖若干张图片即可,优点是最简单的实现方式,只需要UI给图就行,缺点是点击任何地方都会进入下一步操作(需要避免这个情况可以在特定位置上加一个层级较高的透明的p来响应事件),如果布局是相对应自适应而不是等比例缩放,无法使用此方法(我的项目就是这个情况)。
根据目前元素相对应的位置情况在灰色蒙版上面放置图片,可以利用代码获取元素的位置和相对于视口的位置,能够计算出图片的摆放位置。优点在于可以明确某部分响应点击事件,缺点在于需要开发一个通用组件来根据元素位置摆放相应图片,有一定开发量~