遮罩层的制作
开发工具与关键技术:DW 专题技术
作者:彭春怡
撰写时间:2019/1/26
- 下面是通过DW开发工具,完成遮罩层的代码。
Html 源代码:
使用一个大盒子,里面放两个盒子,一个制作遮罩层的按钮,一个制作遮罩层。制作遮罩层的盒子里面再套个大盒子,大盒子里面再放两个小盒子,制作遮罩层里面的内容。
Css 样式代码:
简单的设置自己想要的颜色以及结构。
JS 代码:
“openBtn”:打开遮罩层按钮,“closeBtn”:关闭遮罩层按钮,“so_i”:遮罩层。 - 接下来便是完成的效果:
图1:
图1 用红色笔标记出来的是遮罩层的按钮,点击,遮罩层便会出现。
图2:
图2 便是点击遮罩层按钮实现的结果。用红色笔标记出来的蓝色海心是关闭遮罩层的按钮。
总结:第一次考试时,遮罩层对于我来说一个字难,经过课后尝试自己制作,终于可以制作出简单的效果了。