相關(guān)推薦
您可能對(duì)下面課程感興趣
Axure8.0視頻教程

74小節(jié)已有16710人學(xué)過

UI交互app及axure設(shè)計(jì)教程

84小節(jié)已有76076人學(xué)過

如何通過引用前端JS代碼實(shí)現(xiàn)瀏覽器全屏效果
發(fā)布時(shí)間:2022-03-12 10:07 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

JS代碼準(zhǔn)備:

1、全屏代碼:

  1. javascript:
  2. function requestFullScreen(element) {
  3. var requestMethod = element.requestFullScreen ||
  4. element.webkitRequestFullScreen ||
  5. element.mozRequestFullScreen ||
  6. element.msRequestFullScreen;
  7. if (requestMethod) {
  8. requestMethod.call(element);
  9. } else if (typeof window.ActiveXObject !== "undefined") {
  10. var wscript = new ActiveXObject("WScript.Shell");
  11. if (wscript !== null) {
  12. wscript.SendKeys("{F11}");
  13. }
  14. }
  15. };
  16. requestFullScreen(document.documentElement);

2、退出全屏代碼:

  1. javascript:
  2. function exitFull() {
  3. var exitMethod = document.exitFullscreen ||
  4. document.mozCancelFullScreen ||
  5. document.webkitExitFullscreen ||
  6. document.webkitExitFullscreen;
  7. if (exitMethod) {
  8. exitMethod.call(document);
  9. } else if (typeof window.ActiveXObject !== "undefined") {
  10. var wscript = new ActiveXObject("WScript.Shell");
  11. if (wscript !== null) {
  12. wscript.SendKeys("{F11}");
  13. }
  14. }
  15. };
  16. exitFull();

Axure添加JS代碼:

 

步驟一:

打開Axure,拉取一個(gè)動(dòng)態(tài)面板,創(chuàng)建2個(gè)State面板。一個(gè)面板里放一個(gè)矩形,命名為:全屏。另一個(gè)命名為:退出。如圖:

步驟二:全屏交互制作

打開Axure,進(jìn)入-全屏面板,點(diǎn)擊添加鼠標(biāo)點(diǎn)擊事件,打開-當(dāng)前鏈接-fx。

將前面準(zhǔn)備好的全屏JS代碼復(fù)制到FX里保存即可。要注意的是開頭必須要加。javascript:

設(shè)置面板切換效果,如圖,當(dāng)點(diǎn)擊時(shí)面板切換為退出面板。

步驟三:退出交互制作

打開Axure,進(jìn)入-退出面板,點(diǎn)擊添加鼠標(biāo)點(diǎn)擊事件,打開-當(dāng)前鏈接-fx。

同樣的將前面準(zhǔn)備好的退出全屏JS代碼復(fù)制到FX里保存即可。通樣要注意的是開頭必須要加。javascript:

UI交互app及axure設(shè)計(jì)教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
相關(guān)推薦
您可能對(duì)下面課程感興趣
Axure8.0視頻教程

74小節(jié)已有16710人學(xué)過

UI交互app及axure設(shè)計(jì)教程

84小節(jié)已有76076人學(xué)過

分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會(huì)計(jì)課程 興趣成長 AIGC