讓Axure內聯框架的燈箱效果全屏遮罩
一個簡單的操作實現燈箱效果,我們來看看具體的流程是怎樣的。
聲明:
本方法會引起瀏覽器性能下降,不到萬不得已沒必要使用。
演示地址:
https://usrsky.axshare.com/#id=4wugsh&g=1
先決知識:
你可能需要先學會《如何在Axure中使用“循環”》和《Axure監聽器之全局變量監聽器》這兩個知識。
一、準備工作
首先,我們建一個全局變量Lightbox,默認值為0
二、教程-內聯頁
建一個“內聯頁”,放一個按鈕,和一個動態面板,為了演示方便,動態面板里只放了一張圖片。
按鈕命名為“開燈”,交互非常簡單,單擊時以燈箱效果顯示動態面板,“背景顏色”那里最好有點透明效果。
動態面板命名為“燈箱”,隱藏起來。同時固定到瀏覽器(居中)
交互也只要設置這兩個就可以:
三、教程-框架頁
建一個“框架頁”,里面放一個動態面板,兩個空狀態,再放一個內聯框架,框架目標為“內聯頁”
用來做監聽全局變量Lightbox的動態面板交互如下:
其中“循環間隔”的時間可自定。
此時,已經實現了全屏的燈箱效果了,但是你多點擊幾下會發現:
- 點擊內聯頁的遮罩時可以正常取消燈箱效果。
- 點擊外部框架頁的遮罩時不能取消燈箱效果。
四、修正
其實我們只需兩步就可以修正了:
- 在“框架頁”的頁面上新建交互,當鼠標點擊時設置全局變量Lightbox等于0。
- 在“內聯頁”里對Lightbox進行循環監聽,如果Lightbox等于0,則關掉燈箱效果。
嘗試自己修正一下吧。
本文由 @Jorkin 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發揮!