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