整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
xure本身就提供了模板的功能，也就是说只要实现一次但可以一劳永逸，本文就一起来看看这个遮罩层实现过程和效果。
今天在做产品原型设计时，遇到了个关于动态显现遮罩层的难点。“无奈”为追求高保真的效果，还是花了点心思做个原型实现。待做好回过头来看看的话，其实这个效果的难度也不大，只是看个人意愿是否想做而已。
Axure本身就提供了模板的功能，也就是说只要实现一次但可以一劳永逸。下面就一起来看看这个遮罩层实现过程和效果吧。
做前端开发的同学都知道，在HTML实现一个遮罩层，只需要添加个浮动的DIV即可轻松实现。那么在Axure中如何去实现它呢？
如上图所示，可以将这个遮罩层的实现分为如下2部分：
所以遮罩层的实现思路就清晰啦步骤如下：
接着用3个按钮来做不同效果的展示：
打开遮罩层：
关闭遮罩层：
自动演示：
那么现在来看看最终的实现效果如下，请看下面的大屏幕：
如果想要做全屏的遮罩层就更加的简单啦，只在要显示组件上增加个灯箱的效果即可。
PS：示例源文件下载：遮罩层效果.rp
本文由 @ 凡梦星尘 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
神遮罩层灵活运用。
璃月港。
今天用三步完成原神官网的遮罩层效果。
·先准备好主体部分。
·第一步：添加遮罩层盒子，写上基本css样式，宽、高、背景颜色，绝对定位，覆盖主体盒子。看下效果。
·先让遮罩层隐藏，鼠标经过时遮罩层再显示，这样基础版的遮罩层就完成了。但是这里要改用背景图片，不重复显示，位置中间偏右一点，看下效果。
·然后让遮罩层在最前面显示，加个粗点的边框，一个好看的遮罩层就搞定了。
·最后给遮罩层加个过渡效果，让鼠标一入一处时变得丝滑一点。
下一次再讲讲遮罩层的高级用法。胸垫美背上衣紧身短款打底衫。
频弹出并带遮罩层效果，在如今的互联网上一艘一大堆，但很好有那种代码非常规范，干净，好用的，所以决定自己编写一个，分享出来供大家参考。
效果：
实现：
<!doctype html>
<html>
<head>
<!--声明页面的字符编码(一般有两种)：中文编码(gbk/gb2312)、国际编码（utf-8）-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频弹出，遮罩层应用 --刀刀</title>
<meta name="keywords" content="关键字,遮罩层,刀刀" />
<meta name="description" content="视频弹出，遮罩层应用" />
<!-- css/js -->
<style>
*{margin:0; padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;background:#dfa;height:2000px;}
/* 标题 start */
.subject{width:300px;height:32px;line-height:32px;margin:50px auto;}
/* 标题 end */
/* show start */
.btn{width:185px; height:32px; line-height:32px;display:block;text-decoration:none;margin:0 auto;
padding-left:15px;font-size:16px;border:1px solid #ccc;border-radius:16px;}
.btn:hover{background:#d3d;color:#fff;}
.show-box{width:700px;height:400px;background:#6cf;margin:30px auto; box-shadow:1px 3px 20px 8px #6a907f;
position:absolute;z-index:1;display:none;}
.bg-div{width:100%;height:100%;background:#000;opacity:0.3;filter:alpha(opacity=30);
position:fixed;top:0;left:0;z-index:0;display:none;}
/* show end */
</style>
</head>
<body>
<!-- 标题 start -->
<h1 class="subject">视频弹出，遮罩层应用 --刀刀</h1>
<!-- 标题 end -->
<!-- show start -->
<a href="#" class="btn" >点我啊，给以一个惊喜</a>
<div class="show-box">
<!-- 视频区：优酷的分享视频 -->
<embed src='http://player.youku.com/player.php/sid/XODQ0ODQwNjg4/v.swf' allowFullScreen='true' quality='high' width='700' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
</div>
<div class="bg-div"></div>
<!-- show end -->
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script>
$(function(){
$(".btn").on("click",function(){
var _left=parseInt(($(window).width()-$(".show-box").width())/2);
var _top=parseInt(($(window).height()-$(".show-box").height())/2);
$(".show-box").show().css({left:_left,top:_top});
$(".bg-div").show();
});
$(".bg-div").on("click",function(){
$(".show-box").hide();
$(".bg-div").hide();
});
});
</script>
</body>
</html>
声明：本小编不是专业前端，纯程序员一枚（一直希望前后端通吃的哈），并且使用Notepad++手工编写。
jquery需要自行引入。
*请认真填写需求信息，我们会在24小时内与您取得联系。
