Resources needed

1.jQuery Version library is essential
2.jQuery FullScreen plugin
If it's not convenient for you to download , You can just put the following code copy To your place
JQuery FullScreen plugin:

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/**
  * @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 Code

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<script src=”http: //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”http: //www.w3cways.com/js/jquery.fullscreen.js”></script>
<!– Here I put “jquery.fullscreen.js” Put it on this website –>
<div id=”content”>
     <a href=” #” id=”fsButton”> Click to change the full screen </a>
     <div class =”wrapper”>
         // The page content
     </div>
</div>
<script type=”text/javascript”>
$( function () {
     $(“ #fsButton”).click(function (e) {
         $(“ #content”).fullScreen();
         e.preventDefault();
     });
});
</script>

I put all the page content in “div#content” in , And then there was a “#fsButton” Button , And the rest of the page is placed in “div.wrapper” in . Why put a button ? You'll see later .
CSS Code
The following is to use style to beautify our page , I won't post the code here in detail , I just “div#content” The effect is set :

1
2
3
4
5
6
7
8
#content,
#content.fullScreen {
     width : 960px ;
     margin : 0 auto ;
     font : 17px serif ;
     padding : 45px 45px 10px ;
     background : #fff ;
}

You can beautify the style according to your own needs . I just want to emphasize one point here “#content.fullScreen”, to “#content” Add a different style to the design ( But here I am just lazy , I'm using the same effect ).

If you want to know more about , You can click hard Enhance Your Website with the FullScreen API

Demo

Please quote source for reprint :Web front end (W3Cways.com) - Web Front end learning  » jQuery Make Web Full screen effect

jQuery Make Web More articles on full screen effects

  1. jquery.fullPage.js Full screen scrolling plug-in tutorial Demo

    css part ( You need to import jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  2. FullPage.js- be based on jQuery Plug in full screen scrolling plug in

    fullPage.js It's based on jQuery Plug in for , It can be very convenient . It's easy to create a full screen website . Now we often see full screen websites , Especially foreign websites . These websites use a few big pictures or color blocks as background , Add some simple content , ...

  3. jquery.fullPage.js Full screen scrolling plug in

    notes : This article is reproduced in http://www.51xuediannao.com/js/jquery/jquery.fullPage.html and http://www.360doc.com/content/ ...

  4. JS frame _(JQuery.js) Article full screen animation switch

    Baidu cloud disk Portal password :anap Article full screen animation switching effect <!doctype html> <html lang="zh"> <head> < ...

  5. be based on jQuery Mall website full screen picture switching code

    be based on jQuery Mall website full screen picture switching code . This is a mall website full screen multiple pictures slide switch code . The renderings are as follows : The online preview     Source download Implemented code . html Code : <div class="slid ...

  6. Android learning Android 5.0 Share animation to achieve wechat click full screen effect

    Android5.0 Transition animations , Please have a look at http://blog.csdn.net/qq_16131393/article/details/51112772 Today, share animation to achieve wechat click full screen effect Under the source code of this article ...

  7. js Full screen browser effect

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 【 Reprint summary 】jQuery and HTML5 Full screen focus

    Option setting and description Slider Revolution Many parameter options are provided : delay: Sliding content residence time . Default 9000 millisecond startheight: Slide content height , Default 490 Pixels . startwid ...

  9. Full screen background :15 individual jQuery Plug in to achieve full screen background image or media

    Dynamic websites usually use background images or preloaded screens , To ensure that all resources are loaded on the page , Fully present in the browser . Now many websites show off their images as background images, full screen background , Back to the old Flash But the website is doing it in its own way HTML Resource redistribution . ...

Random recommendation

  1. Detailed explanation of a regular matching of their own original IP The expression of

    Here's a detailed description of a match IP Regular expression of address , Knowledge of regularization , It will be mentioned in the detailed explanation . Before the explanation , Let me first introduce to you ,ip Address generation rules . IP Address , By 32 The conversion of a binary digit to a four decimal word ...

  2. web Safety study notes

    Forum & information http://www.metasploit.cn http://www.freebuf.com http://www.backtrack.org.cn/ http://www.ha ...

  3. Step by step Python3( Ten )-- 1 -- pymysql

    Use pymsql Module operation database #!/usr/bin/env python , ),()]), user='root', passwd='123456', db='test')# Create cursors curso ...

  4. Design pattern The story of an object-oriented pig farm ,C# demonstration ( One )

    For design patterns , essentially , Its biggest use is to adapt to changes in demand . Because of design patterns , We can leave enough space for possible changes in the future at the design stage . We're going through a story of building a modern pig farm , Let's talk about design patterns and requirements ...

  5. ionic Mobile phone detection is realized app Whether to install , If not, download the installation package , If installed, open app( Unrealized iOS platform )

    Plug in requirements ( On cordova Download from the official website ): com.lampa.startapp cordova-plugin-appavailability cordova-plugin-inappbrowser Code ...

  6. Android Video projection NanoHTTPD

    Android Video projection NanoHTTPD Claim to use a java File implementation Http The server It is necessary to analyze its source code and examples public abstract class NanoHTTPD { // Asynchronous execution, please ...

  7. int and String Between each other

    int -> String int i=12345;String s=""; The first method :s=i+""; The second method :s=String.valueOf(i); ...

  8. Java In language 4 An access modifier

    Reprint :http://wuhaidong.iteye.com/blog/851754 Java In language 4 An access modifier stay Java In language 4 Access modifiers in :package( Default ).private.publi ...

  9. linux Next ls -l The command shows what each column of the result represents

    The first field , Represents the properties of a file .Linux The file is basically divided into three properties : Can be read (r), Can write (w), Executable (x). But here are ten squares to add ( When the specific program is implemented , It's actually ten bit position ). The first lattice is a special representation lattice , Presentation directory ...

  10. Gathering Initial Troubleshooting Information for Analysis of ORA-4031 Errors on the Shared Pool

    In this Document   Purpose   Troubleshooting Steps   References APPLIES TO: Oracle Database - Enterp ...