快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

全屏jquery,全屏截图快捷键是什么

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;

}

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 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实现全屏滚动

$(window).scroll(function(event){

//滚动即触发

});

//$(window).scrollTop()这个方法是当前滚动条滚动的距离

//$(window).height()获取当前窗体的高度

//$(document).height()获取当前文档的高度

例:

配合如下使用,即可在滚动是判断是否到底部了;

var bot = 50; //bot是底部距离的高度

if ((bot + $(window).scrollTop()) = ($(document).height() - $(window).height())) {

//当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时;

//我们需要去异步加载数据了

alert('我到底部了');

}


网页标题:全屏jquery,全屏截图快捷键是什么
文章起源:http://6mz.cn/article/dssjpcg.html

其他资讯