用css+jquery实现视频永远占满全屏效果
·
用css+jquery实现视频永远占满全屏的效果(电脑端)
css代码核心
object-fit: fill;
jquery代码核心
//高度
var window_hegiht = $(window).height();
setInterval(
function kk() {
if (window_hegiht != $(window).height()) {
window_hegiht = $(window).height();
$("body").css("height", window_hegiht);
$("#video_box").css("height", window_hegiht);
}
console.log("高度:%d", window_hegiht);
},
1000);
//宽度
var window_width = $(window).width();
setInterval(
function kk() {
if (window_width != $(window).width()) {
window_width = $(window).width();
$("body").css("width", window_width);
$("#video_box").css("width", window_width);
}
console.log("宽度:%d", window_width);
},
1000);
原理
用css的 object-fit: fill; 使视频永远填满整个屏幕,然后用jquery来不停获取窗口的大小速度可以自己设置。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)