一个支持chrome、firefox的全屏插件

　　插件代码

?

( function (){      var  fullScreenApi = {              supportsFullScreen: false ,              isFullScreen: function () { return  false ; },              requestFullScreen: function () {},              cancelFullScreen: function () {},              fullScreenEventName: '' ,              prefix: ''          },          browserPrefixes = 'webkit moz o ms khtml' .split( ' ' );      // check for native support      if  ( typeof  document.cancelFullScreen != 'undefined' ) {          fullScreenApi.supportsFullScreen = true ;      } else  {          // check for fullscreen support by vendor prefix          for  ( var  i = 0, il = browserPrefixes.length; i < il; i++ ) {              fullScreenApi.prefix = browserPrefixes[i];              if  ( typeof  document[fullScreenApi.prefix + 'CancelFullScreen'  ] != 'undefined'  ) {                  fullScreenApi.supportsFullScreen = true ;                  break ;              }          }      }      // update methods to do something useful      if  (fullScreenApi.supportsFullScreen) {          fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange' ;          fullScreenApi.isFullScreen = function () {              switch  ( this .prefix) {                  case  '' :                      return  document.fullScreen;                  case  'webkit' :                      return  document.webkitIsFullScreen;                  default :                      return  document[ this .prefix + 'FullScreen' ];              }          }          fullScreenApi.requestFullScreen = function (el) {              return  ( this .prefix === '' ) ? el.requestFullScreen() : el[ this .prefix + 'RequestFullScreen' ]();          }          fullScreenApi.cancelFullScreen = function (el) {              return  ( this .prefix === '' ) ? document.cancelFullScreen() : document[ this .prefix + 'CancelFullScreen' ]();          }      }      // jQuery plugin      if  ( typeof  jQuery != 'undefined' ) {          jQuery.fn.requestFullScreen = function () {              return  this .each( function () {                  if  (fullScreenApi.supportsFullScreen) {                      fullScreenApi.requestFullScreen( this );                  }              });          };      }      window.fullScreenApi = fullScreenApi; })();

　　调用代码

?

$( function (){      $( '#fullscreenbtn' ).click( function (){          if (window.fullScreenApi.supportsFullScreen){              window.fullScreenApi.requestFullScreen(document.getElementById( 'fullscreenbox' ));          } else {              alert( '就你这浏览器，基本就告别全屏功能了' );          }      }); });

　　HTML代码结构

?

< a  id = "fullscreenbtn" >      < img  id = "fullscreenbox"  style = "display: block; margin-left: auto; margin-right: auto;"  src = "http://pic002.cnblogs.com/images/2012/277258/2012041400022949.gif"  alt = ""  /> </ a >

　　基于fullscreen功能，我们就可以做出很多效果，比如相册：

　　http://eikes.github.com/jquery.fullscreen.js/

　　又比如视频中的全屏功能：

　　http://mediaelementjs.com/

　　当然也不能不说我的HoorayOS中窗口全屏的使用：

　　http://www.hoorayos.com/

转载自：http://www.cnblogs.com/hooray/archive/2012/04/14/2446593.html