三角形的梦想

马黑黑 · 发表于 2024-9-14 11:00

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-9-14 11:01

帖子代码

<style>
	#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp2/sjx.webp') center/cover; box-shadow: 3px 3px 6px #00000080; z-index: 1; display: grid; place-items: center; position: relative; }
	#player { position: absolute; border-radius: 50%; animation: rot 8s linear infinite var(--state); cursor: pointer; filter: drop-shadow(2px 2px 4px #000) drop-shadow(0 0 2px lightblue); }
	@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1399118450" autoplay loop></audio>
	<img id="player" src="https://638183.freep.cn/638183/web/svg/sjx.svg" width="300" height="300" alt="" />
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
	papa: '#tz',
	scale: [player],
	css: 'bottom: 20px; --bg: transparent; --color: white',
});
mState = () => {
	tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	player.title = aud.psuded ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 · 发表于 2024-9-14 11:07

本帖：

① 测试新版 fscreen.js 全屏独立插件，主要新增一个功能：全屏后可以按比例缩放指定的帖子容器下的子元素。指定要伸缩的子元素的方法是使用参数 scale，值为数组。例如，有两个子元素需要伸缩，id分别为 player 和 mypic，则：

scale: [player, mypic],

② 尝试通过给 img 标签加滤镜阴影立体化 svg 图片。

马黑黑 · 发表于 2024-9-14 11:13

关于 fullscreen 状态对子元素的缩放，有好几种实现方式，fscreen插件采用改变子元素宽高的方法，这样可以大致避免一些可能的冲突。

实际上，使用 transform: scale 是最简单有效的方法，它无需关心子元素的尺寸，遗憾的是，transform 往往会被 @keyframes 动画使用，这样子元素再使用 transform 去伸缩就会产生冲突。

纯css3方法也是可行的办法，但CSS预判能力不强，CSS的媒体查询用在插件里也很麻烦。

起个网名好难 · 发表于 2024-9-14 11:13

登录/注册后可看大图

马黑黑 · 发表于 2024-9-14 11:14

本插件的子元素自适应全屏伸缩功能如果测试结果正常，也不会用于之前集成有 fullscreen 功能的插件，新开发或改进的插件会考虑。

马黑黑 · 发表于 2024-9-14 11:17

附：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);

欢迎朋友们指出源码的问题和错误，谢谢！