需要的资源
1.jQuery版本库是必不可少的
2.jQuery FullScreen plugin
如果你下载不方便的话，你可以直接把下面的代码copy到你本地
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代码
|
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>
<!–这里我把“jquery.fullscreen.js”放到本站–><div id=”content”> <a href=”#” id=”fsButton”>点击变全屏</a>
<div class=”wrapper”>
//页面内容
</div>
</div><script type=”text/javascript”>$(function () {
$(“#fsButton”).click(function (e) {
$(“#content”).fullScreen();
e.preventDefault();
});
});</script> |
我将所有页面内容放在了“div#content”中，然后里面放了一个“#fsButton”按钮，并且页面其他内容放置在“div.wrapper”中。为什么要放置一个按钮呢？呆会你就明白了。
CSS代码
下面就是要用样式来美化我们的页面了，这里我就不详细贴上代码了，我只是将“div#content”效果设置了一下：
|
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;
} |
大家可以根据自己所需进行样式的美化。我这里只是强调一点“#content.fullScreen”，给“#content”上另外增加一个不同的样式（不过此处我为了偷懒，我使用的是一样的效果）。
如果您想了解更详细的，可以狠狠的点击Enhance Your Website with the FullScreen API