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

JS代碼準(zhǔn)備：

1、全屏代碼：

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

2、退出全屏代碼：

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

Axure添加JS代碼：

 

步驟一：

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

步驟二：全屏交互制作

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

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

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

步驟三：退出交互制作

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

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

UI交互app及axure設(shè)計教程
我要自學(xué)網(wǎng)商城 ￥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī)，
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC