Teya Salat

CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Giới thiệu HTML5 FullScreen API - Xem trang Web hoặc một phần tử ở chế độ Toàn màn hình

Admin* RoSino18k *
* 29-05-2016

Khi muốn xem trang web ở chế độ toàn màn hình bạn thường nhấn phím F11. Tuy nhiên khi bạn chỉ muốn hiển thị chế độ toàn màn hình cho một phần tử nào đó thì chúng ta không thể thực hiện bằng cách trên.

→demo: *http://dangthanh.org/playground/html5-fullscreen-api

HTML5 cung cấp một API mới cho phép bạn hiển thị toàn màn hình bất kì phần tử nào của một trang web đó là HTML5 Fullscreen API


Các phương thức chính của HTML5 Fullscreen API.

- Phương thức .requestFullScreen()
+ Chrome/Safari/Opera: .webkitRequestFullScreen()
+ Firefox: .mozRequestFullScreen()+ Hiển thị toàn màn hình với phần tử được chỉ định
- Phương thức .cancelFullScreen()
+ Chrome/Safari/Opera: .webkitCancelFullScreen()
+ Firefox: .mozRequestFullScreen()
+ Thoát chế độ hiển thị toàn màn hình
- Phương thức .fullScreen
+ Chrome/Safari/Opera: .webkitIsFullScreen
+ Firefox: .mozfullScreen
+ Xem phần tử đang hiển thị ở chế độ toàn màn hình
- Phương thức :full-screen
+ Chrome/Safari/Opera: :-webkit-full-screen
+ Firefox: :-moz-fullscreen
+ Tương tác với phần tử được chỉ định khi ở chế độ toàn màn hình.

HTML5 Fullscreen API thực sự rất hữu ích khi bạn làm việc với các phần tử như hình ảnh hoặc video. Sau đây để hiểu rõ hơn cách làm việc với HTML5 Fullscreen API, mình xin viết một *hướng dẫn việc sử dụng fullscreen với bản đồ sử dụng leaflet

HTML

<div class="map-wrapper">
<div id="map" class="map"></div>
<a id="fullscreen" class="fullscreen" href="#">Fullscreen</a>
</div>


JavaScript

- CHẾ ĐỘ FULLSCREEN
var fullscreen_element = document.getElementById('map'),
fullscreen_button = document.getElementById('fullscreen');

fullscreen_button.addEventListener('click', function() {
launchFullScreen(fullscreen_element);
}, false);

function launchFullScreen(element) {
if ( element.requestFullScreen ) {
element.requestFullScreen();
} else if ( element.mozRequestFullScreen ) {
element.mozRequestFullScreen();
} else if ( element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if ( element.msRequestFullScreen ) {
element.msRequestFullScreen();
}
}


- THOÁT CHẾ ĐỘ FULLSCREEN

function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}


CSS

Ở chế độ fullscreen ta có thể stylesheet cho thành phần được lựa chọn.
.map:-webkit-full-screen { width: 100%; height: 100%; }
.map:-moz-full-screen { width: 100%; height: 100%; }
.map:-ms-full-screen { width: 100%; height: 100%; }
.map:full-screen { width: 100%; height: 100%; }


HTML5 FullScreen API là một API đơn giản và mạnh mẽ. Mình hi vọng với API đơn giản này các bạn có thể viết những ứng dụng tương tác dễ dàng hơn khi cần hiển thị chế độ toàn màn hình.

Nguồn: DangThanh.Org
↑↑ Lượt xem: 182
score
Đánh giá: 4.5/ 5, 182 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-182]