三角形的梦想
<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: ,
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>
<h2>帖子代码</h2>
<div class="hE"><pre>
<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: ,
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>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script> 本帖：
① 测试新版 fscreen.js 全屏独立插件，主要新增一个功能：全屏后可以按比例缩放指定的帖子容器下的子元素。指定要伸缩的子元素的方法是使用参数 scale，值为数组。例如，有两个子元素需要伸缩，id分别为 player 和 mypic，则：
scale: ,
② 尝试通过给 img 标签加滤镜阴影立体化 svg 图片。 关于 fullscreen 状态对子元素的缩放，有好几种实现方式，fscreen插件采用改变子元素宽高的方法，这样可以大致避免一些可能的冲突。
实际上，使用 transform: scale 是最简单有效的方法，它无需关心子元素的尺寸，遗憾的是，transform 往往会被 @keyframes 动画使用，这样子元素再使用 transform 去伸缩就会产生冲突。
纯css3方法也是可行的办法，但CSS预判能力不强，CSS的媒体查询用在插件里也很麻烦。 https://cccimg.com/view.php/e0894c0da7b69368594ef711c9a07755.webp
本插件的子元素自适应全屏伸缩功能如果测试结果正常，也不会用于之前集成有 fullscreen 功能的插件，新开发或改进的插件会考虑。 <h2>附：fscreen.js源码</h2>
<div class="hE"><pre>
/* 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.w / ww)}px;
height: ${Math.round(papa.offsetWidth * sonsize.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);
</pre></div>
<p>欢迎朋友们指出源码的问题和错误，谢谢！</p>
这个我要换浏览器才可以看
https://file.uhsea.com/2409/549afbbe58efbe9ef15509ecf0aa2f36WY.png
这个三角形很好玩，代码这东西真的太神奇了 小辣椒 发表于 2024-9-14 15:23
网络或浏览器不好，网页资源一直不能完整下载，而代码着色是等页面就绪后渲染的。 小辣椒 发表于 2024-9-14 15:19
这个我要换浏览器才可以看
你的浏览器不会是民国时期出品的吧{:4_170:} 小辣椒 发表于 2024-9-14 15:19
这个我要换浏览器才可以看
浏览器不支持三角形吗{:4_170:} 马黑黑 发表于 2024-9-14 15:50
你的浏览器不会是民国时期出品的吧
那个浏览器我是密码网页记忆的，所以不用输入密码，直接登录，方便一点 新开发的自适应全屏伸缩的全屏封装呢。这个好{:4_187:} 这个svg图图也有趣，分久必合 合久必分的感觉{:4_173:} 背景选择也好，和这三角形变化的小播如此吻合{:4_187:} 小辣椒 发表于 2024-9-14 15:56
那个浏览器我是密码网页记忆的，所以不用输入密码，直接登录，方便一点
好像其他浏览器没有这个功能似的 红影 发表于 2024-9-14 17:23
新开发的自适应全屏伸缩的全屏封装呢。这个好
测试中 红影 发表于 2024-9-14 17:25
这个svg图图也有趣，分久必合 合久必分的感觉
等下我发一个可以生成任意数量三角形（理论值）的东东
页:
[1]
2