资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jquery全屏,jquery全屏滚动

js或者jquery实现页面中的一个div全屏

1、引入外部jquery文件

创新互联公司是创新、创意、研发型一体的综合型网站建设公司,自成立以来公司不断探索创新,始终坚持为客户提供满意周到的服务,在本地打下了良好的口碑,在过去的十年时间我们累计服务了上千家以及全国政企客户,如铜雕雕塑等企业单位,完善的项目管理流程,严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞誉。

比如:

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="后台执行程序,前台遮盖,运行完毕后自动消失" /

div id="go2"

正在提交数据...

/div

jquery如何实现浏览器全屏??

全屏

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

}

事件监听

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

全屏样式设置

在浏览器全屏的使用我们还可以进行样式设置

html:-moz-full-screen {

background: red;

}

html:-webkit-full-screen {

background: red;

}

html:fullscreen {

background: red;

}

jquery或者JS怎么让IE全屏?

在早期的IE浏览器(IE5左右)是可以实现的,现在几乎没有办法做到无交互自动全屏了。

方法1:

你可以提示用户按键盘的F11来全屏观看,获得最佳浏览效果。

方法2:

function fullscreen(){ //在ie下可行

var   wsh   =   new   ActiveXObject("WScript.Shell");  

wsh.sendKeys("{F11}");   

}

fullscreen();

但这种方法会提示用户,网页用到activeX空间,可能不安全。用户取消的可能很大。

方法3:

自己做一个浏览器,请用户下载自己的浏览器。这样就可以在里面控制全屏了。听起来有点天方夜谭,但不是不可能,而是看使用场景了。

jquery怎么实现当前页面按钮点击全屏,点击退出全屏?

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或已被禁用

}

}

需要注意,由于安全限制,需要由事件触发fullscreen,比如绑定到某按钮的单击事件上。直接在控制台调用可能无效。

IE的话可能不支持全屏API,原因大家都懂,在最后的else里面是提示还是使用window.open来实现你可以自己决定

有问题请追问。

请问jquery或JS开发手机网页后使用自带的浏览器打开如何全屏显示!

大多数自带的浏览器都没有这么多功能,不过很多商业的浏览器是提供了全屏浏览的模式的,比如uc浏览器、百度浏览器


文章名称:jquery全屏,jquery全屏滚动
文章分享:http://www.cdkjz.cn/article/hojose.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220