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ữ
Giới thiệu HTML5 FullScreen API - Xem trang Web hoặc một phần tử ở chế độ Toàn màn hình
 |  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: 542 
Đánh giá: 4.5/ 5, 542 bình chọn
| - Chia sẻ: |   |
Link:
Còn “nhiều” Lắm!