整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
信我或關(guān)注微信號：獅范兒，回復(fù)：學(xué)習(xí)，獲取免費學(xué)習(xí)資源包。
演示效果圖：
1、全屏前
2、全屏后
html代碼：
<div class="container">
<p><em>單擊下面的按鈕將元素輸入全屏模式</em></p>
<div class="element" id="element"><p>我在全屏模式下改變顏色！</p></div>
<br />
<button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
全屏!
</button>
</div>
css代碼：
.container {
margin: 40px auto;
max-width: 700px;
}
.element {
padding: 20px;
height: 300px;
width: 100%;
background-color: skyblue;
}
.element p {
text-align: center;
color: white;
font-size: 3em;
}
.element:-ms-fullscreen p {
visibility: visible;
}
.element:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}
來源網(wǎng)絡(luò)，侵權(quán)聯(lián)系刪除
私信我或關(guān)注微信號：獅范兒，回復(fù)：學(xué)習(xí)，獲取免費學(xué)習(xí)資源包。
里巴巴店鋪裝修中離不開全屏輪換廣告，由于阿里店鋪裝修原配的輪換圖有點呆板，所以通過自己編寫的特效代碼來制作全屏輪換廣告還是很有必要的。
(源代碼特效觀看及代碼請在文末)
阿里店鋪裝修全屏廣告輪換效果圖
(由于畫面問題，縮放顯示了，正常寬度是 1920px或100%)
阿里店鋪裝修全屏廣告輪換html代碼
全屏廣告輪換html代碼解釋：
① 屬性的設(shè)置，這里nav(觸發(fā)切換的標簽)不使用默認，對應(yīng)的是.lht_nav里面的li元素，切換的面板設(shè)置為.lht_pane，上下頁按鈕設(shè)置如圖，觸發(fā)動作設(shè)置成點擊觸發(fā).
② li的觸發(fā)標簽個數(shù)與lht_pane面板的數(shù)量必須要一致。
阿里店鋪裝修全屏廣告輪換css代碼
全屏廣告特效css部分說明：
① 這里涉及到一個css小技巧分享，對觸發(fā)標簽容器.lht設(shè)置文本居中，然后子元素設(shè)置為display:inline-block; (內(nèi)聯(lián)塊狀的意思，區(qū)別于float:left),這樣里面的小模塊就會在容器.lht里面居中了，這樣能確保觸發(fā)切換的按鈕能一直畫面中間
② 此處只是外部的箭頭圖片路徑地址
③ .disabled類是當(dāng)上下頁失效(第一頁和最后一頁時)的特定類，小耐這里設(shè)置成不顯示，也可以考慮設(shè)置成透明。
阿里巴巴國內(nèi)店鋪裝修的全屏廣告特效的基本代碼就如上所示，此特效實際就是基于切換組件fx.tabs變通出來的特效，部分全屏特效是可以有縮率小圖在左邊或者右邊，實際只要將觸發(fā)標簽里面的元素換成圖片即可。
由于自媒體文章避免貼出代碼展示網(wǎng)址，所以如果有意獲取源代碼，請訪問小耐博客獲取或閱讀原文后獲取。
我們設(shè)計使用大屏模板或大屏報表時，都會需要瀏覽器全屏展示預(yù)覽的需求，通常我們都需要通過鍵盤F11來切換瀏覽器全屏效果。但是，也發(fā)現(xiàn)了一個問題就是我們面對的很多客戶，他們并不懂F11可以全屏，給產(chǎn)品設(shè)計溝通帶來了不便。那有沒有什么方式可以直接通過鼠標點擊按鈕來切換全屏。答案是肯定有的，今天符號作者教大家如何利用前端的JS代碼來實現(xiàn)瀏覽器全屏效果。
注意：
在看教程之前，請行了解一下，什么時javascirpt，JavaScript入門教程自行百度。當(dāng)然，今天的案例RP也會免費提供給大家下載學(xué)習(xí)，也歡迎應(yīng)用到更多的產(chǎn)品實踐中去
JavaScript介紹：
JavaScript是一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。
先預(yù)覽一下效果：
在線演示地址：Untitled Document
JS代碼準備：
1、全屏代碼：
javascript：
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
requestFullScreen(document.documentElement);2、退出全屏代碼：
javascript：
function exitFull() {
var exitMethod = document.exitFullscreen ||
document.mozCancelFullScreen ||
document.webkitExitFullscreen ||
document.webkitExitFullscreen;
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
exitFull();Axure添加JS代碼：
最早有發(fā)過一篇《Axure生成預(yù)覽地址如何能查看到被瀏覽次數(shù) | 人人都是產(chǎn)品經(jīng)理》，有教過大家，Axure怎么添加JS外部代碼，不懂的可以在回去看看。
步驟一：
打開Axure，拉取一個動態(tài)面板，創(chuàng)建2個State面板。一個面板里放一個矩形，命名為：全屏。另一個命名為：退出。如圖：
步驟二：全屏交互制作
打開Axure，進入-全屏面板，點擊添加鼠標點擊事件，打開-當(dāng)前鏈接-fx。
將前面準備好的全屏JS代碼復(fù)制到FX里保存即可。要注意的是開頭必須要加。javascript：
設(shè)置面板切換效果，如圖，當(dāng)點擊時面板切換為退出面板。
步驟三：退出交互制作
打開Axure，進入-退出面板，點擊添加鼠標點擊事件，打開-當(dāng)前鏈接-fx。
同樣的將前面準備好的退出全屏JS代碼復(fù)制到FX里保存即可。通樣要注意的是開頭必須要加。javascript：
至此，保存文件F5預(yù)覽試試吧。教程相關(guān)文件下載：Axure頁面全屏效果 - 產(chǎn)品大牛網(wǎng)
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
