1、引入外部jquery文件
創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司,自成立以來公司不斷探索創(chuàng)新,始終堅持為客戶提供滿意周到的服務(wù),在本地打下了良好的口碑,在過去的十年時間我們累計服務(wù)了上千家以及全國政企客戶,如銅雕雕塑等企業(yè)單位,完善的項目管理流程,嚴(yán)格把控項目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實力獲得客戶的一致贊譽。
比如:
script?src="Scripts/jquery-1.3.2.min.js"?type="text/javascript"/script
2、點擊按鈕時的JQuery代碼
$(document).ready(function?()?{
$("#go").click(function?()?{???????
/*屬性*/???????
$("#go2").css({?"position":?"absolute",?"text-align":?"center",?"top":?"0px",?"left":?"0px",?"right":?"0px",?"bottom":?"0px",?"background":?"red",?"visibility":?"visible",?"filter":?"Alpha(opacity=90)"
});???????
/*高為屏幕的高*/???????
$("#go2").css({???????????
height:?function?()?{???????????
return?$(document).height();???????
},???????????
width:"100%"????????
});????
});
});
3、html頁面代碼
asp:Button?ID="go"?runat="server"?Style="width:?380px;?position:?absolute;?top:?249px;left:?425px;?background-color:?Green;?height:?65px;"?Text="后臺執(zhí)行程序,前臺遮蓋,運行完畢后自動消失"?/
div?id="go2"
正在提交數(shù)據(jù)...
/div
全屏
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
事件監(jiān)聽
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
全屏樣式設(shè)置
在瀏覽器全屏的使用我們還可以進(jìn)行樣式設(shè)置
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
在早期的IE瀏覽器(IE5左右)是可以實現(xiàn)的,現(xiàn)在幾乎沒有辦法做到無交互自動全屏了。
方法1:
你可以提示用戶按鍵盤的F11來全屏觀看,獲得最佳瀏覽效果。
方法2:
function?fullscreen(){?//在ie下可行
var???wsh???=???new???ActiveXObject("WScript.Shell");??
wsh.sendKeys("{F11}");???
}
fullscreen();
但這種方法會提示用戶,網(wǎng)頁用到activeX空間,可能不安全。用戶取消的可能很大。
方法3:
自己做一個瀏覽器,請用戶下載自己的瀏覽器。這樣就可以在里面控制全屏了。聽起來有點天方夜譚,但不是不可能,而是看使用場景了。
var?fullscreen=function(){
elem=document.body;
if(elem.webkitRequestFullScreen){
elem.webkitRequestFullScreen();?
}else?if(elem.mozRequestFullScreen){
elem.mozRequestFullScreen();
}else?if(elem.requestFullScreen){
elem.requestFullscreen();
}else{
//瀏覽器不支持全屏API或已被禁用
}
}
var?exitFullscreen=function(){
var?elem=document;
if(elem.webkitCancelFullScreen){
elem.webkitCancelFullScreen();?
}else?if(elem.mozCancelFullScreen){
elem.mozCancelFullScreen();
}else?if(elem.cancelFullScreen){
elem.cancelFullScreen();
}else?if(elem.exitFullscreen){
elem.exitFullscreen();
}else{
//瀏覽器不支持全屏API或已被禁用
}
}
需要注意,由于安全限制,需要由事件觸發(fā)fullscreen,比如綁定到某按鈕的單擊事件上。直接在控制臺調(diào)用可能無效。
IE的話可能不支持全屏API,原因大家都懂,在最后的else里面是提示還是使用window.open來實現(xiàn)你可以自己決定
有問題請追問。
大多數(shù)自帶的瀏覽器都沒有這么多功能,不過很多商業(yè)的瀏覽器是提供了全屏瀏覽的模式的,比如uc瀏覽器、百度瀏覽器