JQuery蒙板层（特效）

蒙板层，无非就是调用一个空白的DIV界面，遮挡窗体，无法对窗体下面的东西控件进行操作。

工具：一个空白的div标签，使得覆盖整个窗体，例如下面的mDiv

CSS属性：css设置不透明度opacity

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="script/jquery-3.3.1.min.js"></script><style>#mDiv {position: absolute; /*绝对定位*/width:1024px;height:768px;left: 0px;top: 0px;background-color: black;display: none;opacity: 0.1; /*设置不透明度，相当于磨砂一样，可以看见下面的窗体，但是无法进行操作*/}#xDiv {position: absolute;width: 300px;height: 100px;border: 1px solid red;background-color: #e7e7e7;display: none;}</style><script>$(function () {$('#btnShow').click(function () {$('#mDiv').css('display', 'block');$('#xDiv').css('display', 'block');});});</script>
</head>
<body><input type="button"  id="btnShow" value="现身" /><div id="mDiv"> </div><div id="xDiv" >好嗨哦，感觉人生已经到达了巅峰，感觉人生已经达到了高潮。</div>
</body>
</html>

效果展示：在点击现身按钮以前，浏览器界面是白色，点击现身以后，窗体变为灰色，这是设置透明度的原因，设置了一个蒙板层，将当前的信息与按钮发生了分离。可以对控件以及窗体进行了隔离。用户体验将会是意向不到了。

JQuery蒙板层（特效）相关推荐

Android Studio：增加蒙板/浮层特效
写在前面的话:每一个实例的代码都会附上相应的代码片或者图片,保证代码完整展示在博客中.最重要的是保证例程的完整性!!!方便自己也方便他人~欢迎大家交流讨论~ 接下来要在自定义相机上添加取景框,即中间掏 ...
Android Studio：增加蒙板特效
文章目录 Customcamera Customcamera public class Customcamera extends AppCompatActivity implements Surfac ...
【ae蒙板】文字层一个个显示
一.蒙板路径法关键帧切换到定格,文字显示效果比较好二.蒙版透明度法,每个文字画一个蒙板,利用透明度三.
JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
3K 万能JQuery弹出层类库
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
基于jquery结婚电子请柬特效素材
分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙.效果图如下: 在线预览源码下载实现的代码. html代码: &l ...
CALayer mask属性实现蒙板效果
相信很多人在ios上实现控件圆角的时候都用过:cornerRadius这个属性,例如实现圆形头像,一般我会这么写: self.headImageView.layer.masksToBounds = Y ...
Qt OpenGL 蒙板
这次教程中,我们教介绍OpenGL的蒙板技术.到目前为止,我们已经学会如何使用alpha混合,把一个透明物体渲染到屏幕上了,但有时使用它看起来并不是那么的复合我们的心意.使用蒙板技术,将会使图像按照我 ...
GIMP：利用蒙板工具实现人像抠图
GIMP:利用蒙板工具实现人像抠图利用蒙板工具进行抠图简单介绍方法步骤 1.打开图像 2.复制图层 3.选中图层 4.将图层改为单色 5.人像与背景分离 6.反相显示 7.人像部分描白 8.添加图 ...

JQuery蒙板层（特效）

JQuery蒙板层（特效）相关推荐

最新文章

热门文章