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

No Happy Endings

本帖最后由 马黑黑 于 2025-2-14 12:16 编辑 <br /><br /><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; z-index: 1; }
        #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.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>

马黑黑 发表于 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.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>

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

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

由于 scrollIntoView 的“视口”理念，在该API运行时，长页面会自动翻滚到翻滚对象容器所在区域，这对阅读帖子当前页后续内容、编写回复产生影响，需要暂停音乐（翻页与音频暂停/播放同步）

樵歌 发表于 2025-2-14 13:12

必须停下让妹纸休息一会，才让回帖{:4_170:}

樵歌 发表于 2025-2-14 13:13

这个不需要人搬，妹纸自动跑来跑去{:4_189:}

梦江南 发表于 2025-2-14 13:26

好像回帖要跑掉！

马黑黑 发表于 2025-2-14 13:42

梦江南 发表于 2025-2-14 13:26
好像回帖要跑掉！

这个机制需要把音乐暂停了，三楼有说明

马黑黑 发表于 2025-2-14 13:42

樵歌 发表于 2025-2-14 13:13
这个不需要人搬，妹纸自动跑来跑去

好玩吧？

马黑黑 发表于 2025-2-14 13:43

樵歌 发表于 2025-2-14 13:12
必须停下让妹纸休息一会，才让回帖

{:4_189:}

红影 发表于 2025-2-14 14:21

原来这个就是图片翻页的实例呢，这样的背景下的图片真漂亮{:4_199:}

红影 发表于 2025-2-14 14:23

这个麻烦是自动回到图片所在区域，做在帖子里还真不方便呢{:4_173:}

红影 发表于 2025-2-14 14:24

看到黑黑也做了个scroll版本的，我去看看那个{:4_173:}

樵歌 发表于 2025-2-14 14:36

马黑黑 发表于 2025-2-14 13:42
好玩吧？

玩是好玩，但

樵歌 发表于 2025-2-14 14:37

马黑黑 发表于 2025-2-14 13:43


笑就表示你们串通好了的{:4_189:}

杨帆 发表于 2025-2-14 17:46

马黑黑 发表于 2025-2-14 13:42
好玩吧？

好玩，不影响回帖更好。谢谢老师精彩分享{:4_191:}

马黑黑 发表于 2025-2-14 19:52

红影 发表于 2025-2-14 14:21
原来这个就是图片翻页的实例呢，这样的背景下的图片真漂亮

图片做一些简单处理

马黑黑 发表于 2025-2-14 19:53

杨帆 发表于 2025-2-14 17:46
好玩，不影响回帖更好。谢谢老师精彩分享

{:4_190:}

小辣椒 发表于 2025-2-14 19:53

这个效果和刚才那个有一点不一样，界面回滚动

马黑黑 发表于 2025-2-14 19:53

樵歌 发表于 2025-2-14 14:37
笑就表示你们串通好了的

啊——
强烈抗议，坚决反对{:4_170:}

马黑黑 发表于 2025-2-14 19:53

樵歌 发表于 2025-2-14 14:36
玩是好玩，但

注意休息
页: [1] 2 3 4 5 6 7 8 9
查看完整版本: No Happy Endings