html遮罩层(html遮罩层作用)

虚拟屋 2022-12-20 18:16 编辑:admin 300阅读

1. html遮罩层

这个我做过八点到—电动自行车租赁

这个页面就有开场动画(请用PC打开,手机打开是没有的代码很简单html部分

css部分js部分原理就是一个遮罩层放在最上面,文档加载完成(或者其他触发条件)后,将遮罩层隐藏。

2. html遮罩层作用

一个基本的弹出层应该满足以下需求:

1、点击按钮/链接触发弹出层,弹出层应该有半透明的遮罩层;

2、点击弹出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏弹出层;

3、使用Esc键也可以关闭弹出层;

4、它是响应式的,并且兼容现代主流浏览器。

HTML

1、首先我们在页面放置一个用来触发弹出层的链接,也可以是个按钮button,注意的是我们给它设置一个data-show-layer属性,这个属性值对应的就是弹出层的id,也就是说通过data-show-layer来关联弹出层。

2、很显然,上面的链接关联的弹出层的id是hw-layer。那好,选择我们来准备弹出层hw-layer的html代码。

3、我们弹出层的最外层,也就是遮罩层.hw-overlay,我们会使用CSS控制它是一个半透明的层,用来隔开弹出层和页面主体内容。r然后在.hw-layer-wrap主体层内,我们可以设置弹出层的内容,当然内容由你来定,我们本文结合实例弹出层的内容是一个确认对话框,类似window的confirm()。内容使用了bootstrap的col-*栅格布局,还用了glyphicon字体图标。其实最关键的就是需要遮罩层和主体层,内容可以根据项目需求自定义,因为它可能是个表单、也可能是个纯文字说明的内容。

CSS

1、CSS也是关键的部分,我们先设置遮罩层,它默认情况下应该是不可见的,位置上fixed固定的,并且是覆盖整个页面的,它还是半透明的,我们这里设置了背景黑色、透明度0.3,如background-color: rgba(0,0,0,0.3)。然后主体层.hw-layer-wrap,我们设置它的宽度,计算它的位置。宽度我们可以预设一个值,高度由于内容多少不确定,这里我们不用设置一个具体的值,在后面的js部分会对高度处理,然后设置居中以及边框阴影等效果。有关水平和垂直居中的设置可以参阅Helloweba文章:如何让DIV水平和垂直居中。弹出层里面的内容样式可以自由设置,最后就是使用media query来设置小屏幕下的弹出层居中的问题。

2、我们使用jQuery来处理触发弹出层和关闭弹出层效果,应此需要预先加载jQuery库。showLayer(id)是一个自定义的函数,用来展示弹出层。当点击按钮或链接调用这个showLayer(id)函数,它会渐现的效果展示,并且计算弹出层的高度位移距离,使得弹出主体层水平和垂直方向的居中。而函数hideLayer()就是隐藏弹出层,fadeOut()或者hide()就能实现。最后再加上触发遮罩层的时候关闭弹出层以及使用Esc按钮的时候关闭弹出层的代码。

3、其实到这里,一个基本的弹出层效果已经做好了。我们这里只是做一个基本的弹出层,你也可以进行继续扩展代码。我们看过很多弹出层插件,很多都是动态直接操作DOM的,也就是通过js代码先createElement,然后在将内容append到body里的,这种方式如果是频繁操作DOM的话会消耗一定的性能,所以从性能角度考虑的话,我推荐使用本文提供的弹出层方式。

3. html遮盖层

遮挡浏览器部分内容,一般用到div,可以实现遮挡浏览器窗口的功能,代码为:

<div unselectable="on" style="background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;100%;overflow:hidden;z-index:10000;"></div>

涉及css属性解释一下,根据实际需求调整对应参数:

 1)       background:#000: 将div的背景色设置为黑色; filter:alpha(opacity=10): 在IE下,将div的透明度设置为0.1; opacity:.1: 在非IE下,将div的透明度设置为0.1。

2)       left:0px;top:0px;position:fixed;height:100%;100%: 定义div的高度和宽度分别是浏览器高度和宽度的100%。这里有个小技巧,如果div的position是fixed或者absolute,那么当div的高度设置为百分比(例如100%)时,div的高度将参照浏览器可视区域(viewport)的高度来计算。此外,设置position为fixed,可以使得浏览器即使在scroll或resize时也保证遮罩层一直挡在页面的可视区域。

3)       overflow:hidden 用来避免滚动条的出现。

4. html遮罩层怎么加图片连接

html权重很重要。

因为权重值越高的html样式是最先展示的,他能够将权重级别比较低的样式给覆盖掉的,所以不同的权重呈现出来的样式是不一样的,所以对html来说权重是很重要的一个组成部分的,比如z-index属性值的权重越高,他所在的层次也就越高,通常用于遮罩显示。

5. web遮罩层

创造一个普通图层,并在其上创造一个对象。此处导入一个图象。

在选中刚刚创建的图层,在单击时间轴左下角的新建图层按钮,在选中的普通图层的上边建立一个新的普通图层。

在新建的普通图层上绘制图形与输入文字,作为遮罩层中挖空区域。

将鼠标指针移到遮罩的名字处,单击鼠标右建,调出图层快捷菜单,单击该快捷菜单中的"遮罩层"菜单命令。此时,选中的普通图层的名字会向右缩进,表示已经被它上面的遮罩层所联系,成为被遮罩图层。