Question

我是一个组织的新实习生。我的主管已经为我分配了一项任务，即将全屏功能添加到我们网站的特定网页中。我已经获得了我们网站的完整源代码。我是HTML 5的新手。不过我在互联网上做了一些研究，发现了一些支持这种功能的代码。

现在，对我来说最大的问题是如何将此代码集成到我们的源代码中以及集成代码的位置。我有3个文件。

1.index.html

<!doctype html>
<html lang="en-US">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
 <title>HTML5 Fullscreen Live Demo</title>
  <meta name="author" content="Jake Rocheleau">
 <link rel="shortcut icon" href="http://images.templatemonster.com/images/favicon.ico">
 <link rel="icon" href="http://images.templatemonster.com/images/favicon.ico">
 <link rel="stylesheet" type="text/css" media="all" href="styles.css">

  <script type="text/javascript"         
  <script type="text/javascript" src="jquery.fullscreen.js"></script>
 </head>

 <body>
 <div id="w">
  <h1>HTML5 Fullscreen Basic Demo</h1>

  <p><center><a href="javascript:void(0)" id="fullbtn" class="btn">View Fullscreen</a>
  </center>    </p>

<div class="onlyfull"><center><strong>Look a special image!
   </strong><br><br><img        src="http://www.google.com/logos/2011/robertburns11-hp.jpg"
  a    alt="magic image"></center></div>
  </div>

 </body>
 </html>

2.jquery.fullscreen.js

  // 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(Element.ALLOW_KEYBOARD_INPUT);
    }
  } 

  function fullScreenStatus(){
    return document.fullscreen ||
            document.mozFullScreen ||
            document.webkitIsFullScreen ||
            false;
}

 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());
    });
   }

   // 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'        : $.noop( ),
        'fullscreenClass' : 'fullScreen'
    }, props),

    elem = this,

    // This temporary div is the element that is
    // actually going to be enlarged in full screen

    fs = $('<div>', {
        'css' : {
            'overflow-y' : 'auto',
            'background' : options.background,
            'width'      : '100%',
            'height'     : '100%'
        }
    })
        .insertBefore(elem)
        .append(elem);

    // You can use the .fullScreen class to
    // apply styling to your element
    elem.addClass( options.fullscreenClass );

    // Inserting our element in the temporary
    // div, after which we zoom it in fullscreen

    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.
                // Detach event listener
                $(document).off( 'fullscreenchange mozfullscreenchange webkitfullscreenchange' );
            // Remove the class and destroy
            // the temporary div

            elem.removeClass( options.fullscreenClass ).insertBefore(fs);
            fs.remove();
        }

        // Calling the facultative user supplied callback
        if(options.callback) {
                        options.callback(fullScreen);
                    }
      });

      return elem;
    };

     $.fn.cancelFullScreen = function( ) {
        cancelFullScreen();

        return this;
        };

3.style.css

http://blog.templatemonster.com/2013/07/30/how-to-use-html5-fullscreen-mode/

从上面链接下载了代码，

有人可以告诉我天气我使用正确的代码来获得正确的功能吗？如果是这样，如何整合它并让它运行。

此致新手

HTML5全屏支持仅包含文本的特定网页

0 个答案: