新功能引导实现

新功能引导实现的思路:

1.类似于intro.js的实现,通过html元素id或者其它属性找到该dom节点,将其z-index调至较高层级;

如果新功能需要可点击操作,则使用该种方法

2.使用css的outline属性

.guide {
    outline: 9999px solid rgba(0,0,0,.75);
}

  以上方法在火狐浏览器会有兼容性问题,故改成用box-shadow属性

box-shadow: 0 0 0 9999px rgba(0,0,0,.75)

  但这个方法可能在低版本的sarafi上有兼容问题,可通过js判断浏览器类型,sarafi用上面的outline方法,其它浏览器则使用box-shadow属性

 参考张鑫旭的这篇文章 https://www.zhangxinxu.com/wordpress/2017/05/jquery-guide-js-plugin/

posted @ 2019-09-26 16:39  wayne529  阅读(533)  评论(0编辑  收藏  举报