ai效果图网站,建设一个视频网站需要什么条件,项目网站建设业务分析,社交网络营销的特点一个比好用的新用户引导的库 driverjs
在做这个功能时#xff0c;首先要确定目标是什么样子的#xff0c; 如果只是随意点击下一步下一步#xff0c;那我感觉可能用图片轮播图的方式会快一点#xff0c;更容易解决且方便#xff0c;想要什么步骤 只需要更改图片就好首先要确定目标是什么样子的 如果只是随意点击下一步下一步那我感觉可能用图片轮播图的方式会快一点更容易解决且方便想要什么步骤 只需要更改图片就好但是要管理功能的话就可以使用这个库。
可以使用新版的 新版本是通过 SVG 来显示蒙层的 不是通过一个 div 标签来显示一个大的蒙层之后再通过 position 和 z-index 来控制层级的显示。
在实现这个功能是有多种方法实现的首先可以思考一下新版的实现方式 新版实现方式SVG
主要是通过 SVG 的属性 fill-rule:evenodd clip-rule:evenodd path
首先确定高亮 DOM的位置计算出距离窗口 上下左右的距离通过 path 根据计算的距离勾勒出高亮部分的位置然后 通过 fill-rule:evenodd clip-rule:evenodd 填充和裁切把高亮部分的位置裁切掉最后就实现了就和剪窗花的原理一样剪出一个高亮的形状让 dom 元素透过来
旧版本实现方式position 和 z-index
部分实现差不多都是需要计算出高亮dom元素的大小和距离窗口上下左右的距离不同的是通过position 和 z-index 来控制层级的显示
首先确定高亮dom的位置计算出距离窗口 上下左右的距离然后创建一个新的 dom 元素来作为高亮元素的背景蒙版是 position: fixed; 在整个窗口需要高亮的元素是会添加两个class 分别是添加 position: relative!important; 和 z-index: 100004!important;然后高亮元素 高亮元素的背景 蒙层的层级 分别是 100004 100003 100002 就是 高亮元素在最上层元素背景在中间层蒙层在下一层原本的 DOM 文档流在蒙层的下一层
这个设计到浏览器的渲染原理在绘制时会创建层叠上下文 可以在这个位置查看一下层级的顺序就可以明白他的原理
然而这种实现方式可能会产生一个问题就是在具有 transform 属性的DOM中包含positon 元素的话可能会出现一些问题因为 transform 有可能开启 GUI 渲染然后创建一个独立的图层而 postion 元素由于父级是transform 所有会和它在同一个图层。
小小结
此功能还有很多思路这个库的 API 就不在此描述了 大家可以到其文档看使用还是很方便的主要是讲思路以防公司要求不能使用别人的库要求自己实现那这个思路就可以节省很多思考的时间。
