jQuery制作Web全屏效果

作者：大漠 日期：2012-03-20 点击：1806
fullscreen

记得有一次群里在讨论，有没有办法让页面做成全屏效果，就如在Firefox浏览器上按“全屏”选项，让整个页面满屏显示。当时感觉有点不可思议，可是今天在Tutorialzine.com看到一份教程《Enhance Your Website with the FullScreen API》，可以轻松实现全屏效果。

具体详细的介绍，可以查看Full Screen API，我在此处只介绍一下如何使用jQuery实现全屏效果的过程。

需要的资源

制作这个效果，我们有两样东东是必需的，第一个是jQuery版本库；其次就是制作这个效果的一个jQuery插件——jQuery FullScreen plugin

jQuery版本库大家可以到jQuery官网上轻意下载到，那么jQuery FullScreen plugin插件也可以到这里下载，如果你下载不方便的话，你可以直接把下面的代码copy到你本地：

JQuery FullScreen plugin：

					/**
					 * @name		jQuery FullScreen Plugin
					 * @author		Martin Angelov
					 * @version 	1.0
					 * @url			http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
					 * @license		MIT License
					 */

					(function($){
						
						// Adding a new test to the jQuery support object
						$.support.fullscreen = supportFullScreen();
						
						// Creating the plugin
						$.fn.fullScreen = function(props){
							
							if(!$.support.fullscreen || this.length != 1){
								
								// The plugin can be called only
								// on one element at a time
								
								return this;
							}
							
							if(fullScreenStatus()){
								// if we are already in fullscreen, exit
								cancelFullScreen();
								return this;
							}
							
							// You can potentially pas two arguments a color
							// for the background and a callback function
							
							var options = $.extend({
								'background' : '#111',
								'callback'	 : function(){}
							}, props);
							
							// This temporary div is the element that is
							// actually going to be enlarged in full screen
							
							var fs = $('<div>',{
								'css' : {
									'overflow-y' : 'auto',
									'background' : options.background,
									'width'		 : '100%',
									'height'	 : '100%'
								}
							});

							var elem = this;

							// You can use the .fullScreen class to
							// apply styling to your element
							elem.addClass('fullScreen');
							
							// Inserting our element in the temporary
							// div, after which we zoom it in fullscreen
							fs.insertBefore(elem);
							fs.append(elem);
							requestFullScreen(fs.get(0));
							
							fs.click(function(e){
								if(e.target == this){
									// If the black bar was clicked
									cancelFullScreen();
								}
							});
							
							elem.cancel = function(){
								cancelFullScreen();
								return elem;
							};
							
							onFullScreenEvent(function(fullScreen){
								
								if(!fullScreen){
									
									// We have exited full screen.
									// Remove the class and destroy
									// the temporary div
									
									elem.removeClass('fullScreen').insertBefore(fs);
									fs.remove();
								}
								
								// Calling the user supplied callback
								options.callback(fullScreen);
							});
							
							return elem;
						};
						
						
						// These helper functions available only to our plugin scope.


						function supportFullScreen(){
							var doc = document.documentElement;
							
							return	('requestFullscreen' in doc) ||
									('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
									('webkitRequestFullScreen' in doc);
						}

						function requestFullScreen(elem){

							if (elem.requestFullscreen) {
									elem.requestFullscreen();
							}
							else if (elem.mozRequestFullScreen) {
									elem.mozRequestFullScreen();
							}
							else if (elem.webkitRequestFullScreen) {
									elem.webkitRequestFullScreen();
							}
						}

						function fullScreenStatus(){
							return	document.fullscreen ||
									document.mozFullScreen ||
									document.webkitIsFullScreen;
						}
						
						function cancelFullScreen(){
							if (document.exitFullscreen) {
									document.exitFullscreen();
							}
							else if (document.mozCancelFullScreen) {
									document.mozCancelFullScreen();
							}
							else if (document.webkitCancelFullScreen) {
									document.webkitCancelFullScreen();
							}
						}

						function onFullScreenEvent(callback){
							$(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){
								// The full screen status is automatically
								// passed to our callback as an argument.
								callback(fullScreenStatus());
							});
						}

					})(jQuery);

HTML Markup

有了前面的东东后，那我们就可以开始动手写这个效果了，老样子，先写出效果所需的HTML代码：

					<div id="content">
					  <a href="#" id="fsButton">Go To FullScreen</a>
					    <div class="wrapper">
					      //页面内容
					    </div>
					  </div>

我将所有页面内容放在了“div#content”中，然后里面放了一个“#fsButton”按钮，并且页面其他内容放置在“div.wrapper”中。为什么要放置一个按钮呢？呆会你就明白了。

CSS Code

下面就是要用样式来美化我们的页面了，这里我就不详细贴上代码了，我只是将“div#content”效果设置了一下：

					#content,
					#content.fullScreen{
						/* Adding a width and margin:0 auto to center the container */
						width: 960px;
						margin: 0 auto;

						/* Increasing the font size for legibility*/
						font: 17px serif;
						padding: 45px 45px 10px;
						background: #fff;
					}

大家可以根据自己所需进行样式的美化。我这里只是强调一点“#content.fullScreen”，给“#content”上另外增加一个不同的样式（不过此处我为了偷懒，我使用的是一样的效果）。

实现功能

完成了上面的东东后，我们接近效果就很近了，下面简单的来看看如何使用FullScreen。简单点就是分两步：

1、调用文件

这里所说的调用文件，指的就是在你的项目中调用前面我们准备的两个文件：jQuery版本库和jQuery FullScreen plugin：

					<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
					<script type="text/javascript" src="js/jquery.fullscreen.js"></script>

2、实现功能

这一步可以说是最后一步了。为了实现这个全屏效果，我们给刚才的那个“按钮”添加一个“click”事件。当点击按钮后，整个页面进入全屏状态，具体大家请看代码：

					$(function(){
						$("#fsButton").click(function(e){
							$("#content").fullScreen();
							e.preventDefault();
						});
					});

这个就不用我说了，你都比我懂。说到这里，懂js的童子就可以看看源码了，也可以添加一些更好的效果，至于像我这样的小白童子，我们知道怎么使用就OK了，等我们也变成老鸟后在回过头来看。

那么到这里整个制作过程就算是完成了，大家要是感兴趣不仿一试。如果您想了解更详细的，可以狠狠的点击Enhance Your Website with the FullScreen API。最后非常感谢martinaglv给我们带来这么好的插件。

如需转载烦请注明出处：w3cplus

返回顶部