实现一个非常实用的页面引导功能

一、以上项目地址演示源码功能说明。添加引导层，引导用户操作。使用newGuide([{selector:'#t1',src:'img/pic-1.png',delay:500,before:function(done){done()},handler:function(el,img,option){return{x:-img.width+el.offsetWidth+(img.height-el.offsetWidth)/2,y:-(img.height-el.offsetHeight)/2}}},{选择器:'#t2',src:'img/pic-1.png',handler:function(el,img,option){返回{x:-img.width+el.offsetWidth+(img.height-el.offsetWidth)/2,y:-(img.height-el.offsetHeight)/2}}}],9999)参数说明/**@paramssteps:stepsPlay*@paramszIndex:layerlevel(optional,default99999)*Guide(Array:steps,Number?:zIndex)interfaceStep{//目标选择器（必填）String:选择器//引导图片（必填）String:src//延迟时间（可选）Number?:delay//轮询查询目标timesNumber?:repeat//在计算和显示引导图之前挂钩（可选）Function?:before(Function:done)//引导图的位置校正函数（可选，默认对齐目标左上角）Function?:handler(Element:el,ImgElement:img,Object:option)}实现函数说明实现逻辑按照steps异步加载所有src添加页面元素canvas并设置当前step获取页面高宽并清除点击事件轮询selector直到获取到object再重复绘制前延迟时间执行根据处理程序在画布上的背景和图片位置添加点击事件将当前步骤设置为下一步，重复步骤2-9直到步骤为空。不知道怎么写文章。希望源码和这些介绍对你有所帮助。喜欢就点个赞吧