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://lswzjz.com/article/dssjpcg.html