附:fscreen.js源码
/* fscreen.js by Mahei on 2024-9-14 */;
var fsBox = document.createElement('div');
fsBox.id = 'btnFs';
fsBox.innerText = '进入全屏';
fsBox.style.cssText += `
position: absolute;
color: var(--color);
background: var(--fsBg);
border: 2px solid var(--color);
border-radius: 6px;
padding: 4px;
transition: opacity 1s;
cursor: pointer;
opacity: 0;
z-index: 1000;
`;
(function(mkFS) {
let setFullScreen = (user_set) => {
let _config = { papa: '#papa', css: 'left: 50%; bottom: 10px; transform: translate(-50%); --color: white; --bg: #333;' };
let data = {..._config, ...user_set};
let papa = document.querySelector(data.papa);
if(typeof(papa) !== 'object') return false;
papa.appendChild(fsBox);
fsBox.style.cssText += data.css;
let timerId, fs = false, ww = papa.clientWidth, sonsize = [];
let zooms = data.scale;
if(zooms) {
zooms.forEach(z => {
sonsize.push({w: z.clientWidth, h: z.clientHeight});
});
}
let zommer = () => {
zooms.forEach((s,k) => {
s.style.cssText += `
width: ${Math.round(papa.offsetWidth * sonsize[k].w / ww)}px;
height: ${Math.round(papa.offsetWidth * sonsize[k].h / ww)}px;
`;
});
};
papa.addEventListener('mousemove', () => {
clearTimeout(timerId);
fsBox.style.opacity = '1';
timerId = setTimeout('fsBox.style.opacity = "0"', 3000);
});
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement !== null) {
fs = true;
fsBox.innerText = '退出全屏';
} else {
fs = false;
fsBox.innerText = '进入全屏';
}
zommer();
});
fsBox.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();
};
mkFS.FS = setFullScreen;
})(this);
欢迎朋友们指出源码的问题和错误,谢谢!
|