Leg*_*end 52 html javascript jquery flot css3
我正在使用Flot来绘制我的一些数据,我认为在点击按钮后使这个图形显示为全屏(在显示器上占据整个空间)会很棒.目前,我的div情况如下:
<div id="placeholder" style="width:800px;height:600px"></div>
当然,style属性仅用于测试.CSS在实际设计中我会把它移到后面.无论如何,我可以使这个div全屏,仍然保留所有事件处理？
1.4*_*4mb 82
您可以使用HTML5 Fullscreen API(这是我认为最合适的方式).
必须通过用户事件(单击,按键)触发全屏,否则它将无法工作.
这是一个按钮,可以点击div全屏.在全屏模式下,按钮单击将退出全屏模式.
$('#toggle_fullscreen').on('click', function(){
// if already full screen; exit
// else go fullscreen
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
element = $('#container').get(0);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
});#container{
border:1px solid red;
border-radius: .5em;
padding:10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
<a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>
</p>
I will be fullscreen, yay!
</div>另请注意,适用于Chrome的全屏API不适用于非安全页面.有关详细信息,请参阅https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins.
另一件需要注意的事情是:全屏CSS选择器.您可以将此附加到任何css选择器,以便在该元素为全屏时应用规则:
#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
width: 100vw;
height: 100vh;
}
小智 71
当你说"全屏"时,你的意思是像计算机的全屏,还是占用浏览器的整个空间？
你不能强迫用户全屏F11; 但是,您可以使用以下CSS将div设为全屏
div {width: 100%; height: 100%;}
这当然会假设你的div是<body>标签的孩子.否则,除了上面的代码之外,您还需要添加以下内容.
div {position: absolute; top: 0; left: 0;}
dar*_*ryl 23
CSS方式:
#foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
JS方式:
$(function() {
function abso() {
$('#foo').css({
position: 'absolute',
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function() {
abso();
});
abso();
});
Tom*_*ski 20
对于浏览器渲染区域的全屏,所有现代浏览器都支持简单的解决方案.
div#placeholder {
height: 100vh;
}
唯一值得注意的例外是Android低于4.3 - 但仅限于系统浏览器/ webview元素(Chrome工作正常).
浏览器支持图表:http://caniuse.com/viewport-units
对于全屏显示器,请使用HTML5 Fullscreen API
小智 10
.widget-HomePageSlider .slider-loader-hide {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10000;
background: white;
}
可以像这样使用 FullScreen API
function toggleFullscreen() {
let elem = document.querySelector('#demo-video');
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
演示
function toggleFullscreen() {
let elem = document.querySelector('#demo-video');
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
const elem = document.querySelector('#park-pic');
elem.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}#container{
border:1px solid #aaa;
padding:10px;
}
#park-pic {
width: 100%;
max-height: 70vh;
}PS：现在使用screenfull.js。JavaScript Fullscreen API 的跨浏览器使用的简单包装器。
| 归档时间： |
|
| 查看次数： |
174880 次 |
| 最近记录： |