No Happy Endings

马黑黑 · 发表于 2025-2-14 12:11

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

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

x

本帖最后由马黑黑于 2025-2-14 12:16 编辑

1

马黑黑 · 发表于 2025-2-14 12:12

本帖：测试 scrollIntoView 自动翻页功能

<style>
#papa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp3/ims.webp') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; }
#stage { position: absolute; width: 460px; height: 600px; border-radius: 50%; overflow: hidden; white-space: nowrap; cursor: pointer; }
#stage img { width: 100%; mask: radial-gradient(red, transparent); }
#stage img:hover { mask: unset; }
#btnplay { --state: running; position: absolute; bottom: 10px;; width: 30px; height: 30px; color: white; display: grid; place-items: center; cursor: pointer; }
#btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed cyan; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
#btnplay:hover::before { border-style: dotted; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="stage">
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji01.jpg" />
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji02.jpg" />
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji03.jpg" />
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji04.jpg" />
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji05.jpg" />
<img alt="" src="https://638183.freep.cn/638183/t24/biu/ji06.jpg" />
</div>
<div id="btnplay">1</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27770747" autoplay loop></audio>
</div>
<script>
var lastIdx = 0, pTimer;
var images = stage.querySelectorAll('img');
var mState = () => {
btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = (idx) => {
idx = Math.floor(Math.random() * images.length);
if(idx === lastIdx) idx = (idx+1) % images.length;
lastIdx = idx;
btnplay.innerText = idx + 1;
images[idx].scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
if(pTimer) clearTimeout(pTimer);
pTimer = setTimeout(turn2, 3000);
};
aud.onpause = aud.onplaying = () => mState();
stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>