režim fullscreen je režim alebo displej, ktorý zobrazuje celú obrazovku zariadenia. Všeobecne sa tento režim často používa pri funkciách videa alebo fotografií.
Tentoraz ho však nainštalujeme a použijeme na blog alebo webovú stránku, aby sa už viac nezobrazoval Panel s adresou alebo Ponuka Tab v prehliadači. Preto sa viac zameriavame na obsah článku alebo na obsah webovej stránky.
Pri tejto príležitosti autor dá krátky návod Ako vytvoriť funkcie na celú obrazovku pomocou JavaScriptu v službe Blogger.
fitu fullscreen použijeme CSS a JavaScript, ale len relax, táto funkcia nebude príliš zaťažujúca načítanie webu. Ak vás to zaujíma, môžete vidieť v nasledujúcom návode.
Ako vytvoriť režim celej obrazovky v službe Blogger
1, Prihláste sa do účtu Blogger → Témy → Upraviť HTML.
2, Skopírujte a prilepte kód štýlu CSS nižšie pred kód ))> alebo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <style typ= 'text / css'> #openfull, #exitfull { pozadia: 0 0; hraničné: nikto; kurzor: ukazovateľ; vypchávka: 0; okraj: 0; text-align: centrum; šírka: 30PX; výška: 55px; line-height: 55px; plavák: left; } #openfull: active, #exitfull: active, #openfull: focus, #exitfull: focus { obrys: 0; } #openfull svg, #exitfull svg { vertikálne zarovnanie: prostredný; } #exitfull { zobraziť: nikto; } |
3, Tesne pred kódom zadajte kód JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | //
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
document.getElementById("openfull").style.display = "none";
document.getElementById("exitfull").style.display = "block";
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
document.getElementById("openfull").style.display = "block";
document.getElementById("exitfull").style.display = "none";
}
//))>
|
4, Nakoniec vložte označenie kódu volajúceho nižšie. Pri umiestňovaní si môžete navzájom upraviť svoje želania. Napríklad tu som to dal do časti Hlavička.
1 2 3 4 | <div> <gombík árie–štítok=„Otvoriť celú obrazovku“ id="Openfull" onclick="openFullscreen ();"><svg šírka="24" výška="24" Viewbox="0 0 24 24 "><cesta fill="# FFF" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" /></svg></gombík> <gombík árie–štítok=„Ukončenie na celú obrazovku“ id="Exitfull" onclick="closeFullscreen ();"><svg šírka="24" výška="24" Viewbox="0 0 24 24 "><cesta fill="# FFF" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></svg></gombík> </div> |
5, Uložiť tému.
Nasleduje displej Celá obrazovka nainštalované v službe Blogger.
Živý náhľad
To je celý návod Ako vytvoriť funkcie na celú obrazovku pomocou JavaScriptu v službe Blogger autor s vami zdieľa. Ak máte otázky týkajúce sa tohto článku, neváhajte komentovať nižšie. Vyskúšajte.
Ďalšie príručky od autora:
- Ako prevádzať prevod meny na PayPal Android
- Praktické spôsoby, ako dobiť diamantové mobilné legendy o fondoch
- Ako nainštalovať miniaplikáciu Star Rating pomocou CSS v službe Blogger
- Ako zmeniť zobrazenie upozornení Android na Like iPhone
- Ako pridať novú menu na Android PayPal
<! –