整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
xure本身就提供了模板的功能，也就是說只要實現(xiàn)一次但可以一勞永逸，本文就一起來看看這個遮罩層實現(xiàn)過程和效果。
今天在做產(chǎn)品原型設計時，遇到了個關于動態(tài)顯現(xiàn)遮罩層的難點。“無奈”為追求高保真的效果，還是花了點心思做個原型實現(xiàn)。待做好回過頭來看看的話，其實這個效果的難度也不大，只是看個人意愿是否想做而已。
Axure本身就提供了模板的功能，也就是說只要實現(xiàn)一次但可以一勞永逸。下面就一起來看看這個遮罩層實現(xiàn)過程和效果吧。
做前端開發(fā)的同學都知道，在HTML實現(xiàn)一個遮罩層，只需要添加個浮動的DIV即可輕松實現(xiàn)。那么在Axure中如何去實現(xiàn)它呢？
如上圖所示，可以將這個遮罩層的實現(xiàn)分為如下2部分：
所以遮罩層的實現(xiàn)思路就清晰啦步驟如下：
接著用3個按鈕來做不同效果的展示：
打開遮罩層：
關閉遮罩層：
自動演示：
那么現(xiàn)在來看看最終的實現(xiàn)效果如下，請看下面的大屏幕：
如果想要做全屏的遮罩層就更加的簡單啦，只在要顯示組件上增加個燈箱的效果即可。
PS：示例源文件下載：遮罩層效果.rp
本文由 @ 凡夢星塵 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載
題圖來自Unsplash，基于CC0協(xié)議
神遮罩層靈活運用。
璃月港。
今天用三步完成原神官網(wǎng)的遮罩層效果。
·先準備好主體部分。
·第一步：添加遮罩層盒子，寫上基本css樣式，寬、高、背景顏色，絕對定位，覆蓋主體盒子。看下效果。
·先讓遮罩層隱藏，鼠標經(jīng)過時遮罩層再顯示，這樣基礎版的遮罩層就完成了。但是這里要改用背景圖片，不重復顯示，位置中間偏右一點，看下效果。
·然后讓遮罩層在最前面顯示，加個粗點的邊框，一個好看的遮罩層就搞定了。
·最后給遮罩層加個過渡效果，讓鼠標一入一處時變得絲滑一點。
下一次再講講遮罩層的高級用法。胸墊美背上衣緊身短款打底衫。
頻彈出并帶遮罩層效果，在如今的互聯(lián)網(wǎng)上一艘一大堆，但很好有那種代碼非常規(guī)范，干凈，好用的，所以決定自己編寫一個，分享出來供大家參考。
效果：
實現(xiàn)：
<!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">
<!-- 視頻區(qū)：優(yōu)酷的分享視頻 -->
<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>
聲明：本小編不是專業(yè)前端，純程序員一枚（一直希望前后端通吃的哈），并且使用Notepad++手工編寫。
jquery需要自行引入。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
