新功能引导实现

新功能引导实现技巧
本文探讨了新功能引导的实现思路,包括使用类似intro.js的方法调整DOM节点层级,及利用CSS的outline和box-shadow属性突出新功能,同时解决浏览器兼容性问题。

新功能引导实现的思路:

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/

转载于:https://www.cnblogs.com/lw5116/p/11592702.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值